The parallax effect in web design is something that has gained popularity over the past couple of years. When used properly, it can result in a rich and engaging user experience with seamless navigation. When used poorly, it can result in just a page with a lot of elements moving around and a terrible UX. If you’re considering using a parallax effect in your next web design project, we’ve gathered some great examples here to inspire you.
Hero
A portfolio WordPress theme that uses a parallax effect in the home page banner to highlight the site’s key message in an engaging fashion.
Bagigia
Scroll down to explore the website and enjoy a 360 view of the products.
Whiteboard
Here the concept is the same, fixed images with texts and content moving, creating a nice and smooth effect.
Playtend
Playtend choose a fun concept and executed it pretty well. Scroll down and the monster will “eat the content.”
New Zealand
Scroll down to explore things to do in New Zealand while you see more beautiful background images.
TokioLab
TokioLab uses a lot of typography to help you navigate their website. Scroll down to explore their mission and portfolio while you enjoy a lot of moving text.
Cheese Please
Cheese Please is a game so of course we can expect a lot of colors and fun elements on their website. Even with all the colors and elements moving they accomplished a nice and fun effect.
Marcus Thomas
Scroll down to explore the website and see texts and images nicely floating around.
Krystalrae
Once again we see an example of fixed background images (textures in this case) with content moving and creating a nice effect. Scroll all the way to the bottom of the page to change the model’s outfit.
Air Jordan 2012
Scroll down to choose your flight mode while you enjoy planes, shoes and texts floating around.
Q music Titanic
Scroll all the way down to check some Titanic facts and to find the ship in the bottom of the ocean.
no leath
Scroll down to see the different shoes they offer while a lot of colorful images float around.
Putzengel
Beautiful colors, type and textures will move around while you navigate their products and services.
Fishy
A fun and creative approach to parallax applied to a creative agency website.
Tokyu Agency Recruit 2013
Press start and they will take you down the road so you can start scrolling to check out if you have what they need to apply for the job.
Soleil Noir
Scroll down to explore a colorful and smooth navigation. The color scheme, textures and type are really nice here.
OK Studios
Another good example of fixed images and moving content.
Good selection. Already got an idea what to implement in a project of mine!
Cheers!
Parallax has a few uses and it’s coming back, great list.
very nice selection , thank you !
Some really great examples. Thanks for sharing. We launched something similar last week: https://www.essentielevetten.be
Nice examples. Thanks for sharing !
Thank you for posting this. It gave me some ideas for a project I’m working on right now.
I didn´t know, how is this effect called, thank you very much for this.
Great new set of parallax scrolling websites! Have a look at https://www.realaletrailflintshire.co.uk
Thanks for this! My new portfolio site is parallax as well.
Great selection. I got some ideas for websites.
Just a shame that so many of those designs—while looking awesome and being technically impressive—fall down on the basics of modern web implementation, especially: accessibility, mobile-friendliness, and performance. Just try viewing them on a mobile browser, or disabling JS or CSS, or (God forbid) try using a screen reader.
Granted, there are some really beautiful works you’ve listed here, and thanks for the great inspirations, but it’s the technical aspects that would lead me to seriously question the “form vs function” aspect of some of them… I just hope they really knew their (browser) audience.
Nice selection, indeed. Parallax scrolling looks nice and can create some emotions if well done. However, it is good for SEO, SEM? Is it good to create landing pages? Does it fit the needs of a visitor? Do I find the information I want?
I took the example of “Putzengel”:
>5 sec load time – bad, Google will give you little points for this
Result for “Putzfirma Wien” (that’s how you probably would search a company like them: NOT on the first 10 pages at Google
It took my too long time to find out in which city they’re working, I’m not patient enough and would probably leave the site
Beside two weaknesses of design/funtionality:
Google maps no possibility to show directions to their office
Link to designer opens in same window (is this best practice? You’re loosing your potential client)
There are many more things. So, I’m not convinced parallax scrolling is something I would like to have on my website, sorry.
Really interesting stuff, a great collection.
Air Jordan is amazing!
Gisele, thanks for sharing again.
I’m sorry, but parallax scrolling site are the new Flash intro. Regardless of how well they are designed. (There were some pretty well designed Flash intros back in the day.) It just seems that if this is to be a replacement for experience design, it should actually involve an experience deeper than flicking your scroll wheel.
Yep, have to agree. A few of these sites nailed the look and the functionality, but most sacrificed the latter, and I was quickly left either hunting for relevant information or bored. Often both, as the novelty wore off. I think these are the types of designs that make lists like these, but make it difficult on potential customers. Web designers seem to be the target audience for these sites, and I’m fairly sure that’s not intentional.
Wow, so well done! I’m jealous. 🙂
Thanks for posting this. OK-Studio very exciting. Shows how progressive they can be. Look forward to reading more of your posts.
Some nice example here, but not all have the parallax effect. The parallax effect is where the objects move at different speeds to create the illusion of depth, Ie objects in the foreground move quickly, whilst objects at a distance move slower. The paper cranes in the https://www.ok-studios.de/home/ example show this well.
Is there a better term we can use for websites with scrolling navigation? I’d like to see the term parallax used only when it relates to the meaning of the word.
Really nice technique and a great collection of examples. Such an exciting time for the web.
Thank you Gisele!
That’s an awesome collection of emerging trends. Can’t wait to go back to my bookmark.
Cheers.
I didn’t go through all of them, but I really loved the typography focused one (from Tokio Labs) and the cute Playtend one. I really liked the concept of the New Zealand one, but at least on my screen it looked really choppy. The Ok Studios one is cool too. All of these have elevated their websites from merely functional to being an art form, which I feel like usually graphic designers and web designers get criticized of lacking. Beautiful!
This article is disappointing. Although these may seem like it is minimalist and simple they are anything but. “Scaled back to the bare necessities” doesn’t mean less time, it means the designers need to focus more on the small details and grid. Also, all these examples are the same as being minimalist, not exactly a “merging trend” as most good designers have already done this previously.
Some of the examples are so impressive! Even though they’re not great for SEO or mobile browsing… and some of the designs didn’t really work on a laptop sized screen.. but that’s being picky.
Some great examples here, cheers.
You forgot our website 🙂 https://www.taptapdesign.com We have an awesome parallax effect on the main slider 🙂
This is one one the most inspirational articles I have seen for a long while. Parallax scrolling seems to be the in thing at the moment and something that I personally love. I think it adds a great effect to a website and can bring it to life and enhance a users experience. I love all the examples you have put together and they all have aspects that give them that wow factor. The sites that really stood out for me were the Air Jordan 2012 and Krystalrae sites. I love the smoothness of both sites, in the case of Air Jordan the attention to detail with how the inner boot goes inside the shoe and with Krystalrae how the model changes outfit as you scroll down. Greta article and I look forward to seeing more like this from yourself.
Honored we made your list. Thank you!
Nice exemples,
I like the idea of Playtend, very fun and simple, but i’m not sure that its really parallax scrolling… just a normal scrolling with a fixed image on top. No ?
I did my portfolio in parallax scrolling too, but almost one year ago, so it’s not that good, its based on the nikebetterworld website : https://geoffrey-menissier.fr
Thanks for the inspiration !
The Hero demo doesn’t seem to do a lot for me on this version of FF –
Kind of like the Bagigia site, but it still kind of seems we’re pushing the boudaries of browsers beyond what they are comfortable with…
Many Thanks,
Darren.
I really like TokioLab fun and interavtive site that is different
hey, check this one, seems they’re using parallax too..
https://www.visiartmedia.com
Really very nice collection…. Great job.
Hero portfolio WordPress theme, Playtend or Friendly Gents websites doesn’t count as parallax effect.
As we read on the Wikipedia: “Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines”.
A website using parallax effect has a background that moves slightly slower than the user scrolls. You do that by changing the top position of the background for every pixel the page is scrolled. You’ll need more than HTML and CSS to archive a real parallax effect. Something like JQuery to make calculations.
Multiple backgrounds can be applied to a entire page or just a section (using DIVs, etc.) and are moved in a similar way: every time the user scrolls down or up the page by a pixel, the positions of the backgrounds are changed (usually at different speeds to make the effect).
If JavaScript is Disabled in the browser, the user hit a problem. All that jQuery does is moves the backgrounds relative to the position of the scrollbar. Without it, the backgrounds just stay put and the user would never know they are missing out the real action… Even when CSS2 does a good enough job to still make the effect look cool, is not really parralax effect. That’s just a simple background with a fixed attribute (like you can see in Hero WordPress theme’s header).
A good example of real parallax in this list is the OK Studios website…
The bad part about parallax effect on sites is that designers become exited about using really big images and PNG transparency to create a good looking website (not to mention lots of additional scripts and HTML5 + CSS3 to add sliders, etc.)… but that pays on loading time…
Actually, I’m making my personal blog using mostly text over different layers to get the stuff working… and loading times works good enough.. like a “normal” website 🙂
Agree with Chris Black, some of these examples don’t really use parallax effect. Also with the big resources loaded. Many parallax sites need a longer loading time. But I think if the interface is awesome, it is still worth waiting then.
By the way, this is still a great list of web design inspiration! Thanks for posting
This is a site for a wedding between a web designer / rocker and his special gal. Some Brits in the house I’m AirBnBing are friends with the dude and showed it to me the other day. Pretty sure it beats all of the above hands-down: https://jessandruss.us/
Really very nice collection…. Great job.
‘Cheese Please’ looks really nice.
I think it’s important to use the freshest trends (wisely, of course) in order to attract more visitors.