Parallax scrolling trended quite some time ago now, and although it didn’t really take off as was forecast at that time, it is once again gathering speed. There are plugins that make the transitions much smoother these days – the first parallax scrolling sites were very jumpy when scrolling with the mouse – using the side progress bar worked better, but still not as smooth as we see now. Parallax and other scrolling effects are great for story-telling in website design, and can make one page websites outstanding.
Plugins such as Skrollr, which is a stand-alone parallax scrolling library for mobile and desktop, using no jQuery, only JavaScript, and SuperScrollorama, which is a jQuery plugin for scrolling animations make the developers work much lighter when adding such effects to a website. Here are 20 wonderful examples of parallax scrolling in website design.
Parallax Scrolling
Brice Darmon
This is the very creative portfolio site of French photographer Brice Darmon. The categories are divided into colors, and this is a perfect example of parallax scrolling – the marble-effect background moves very slowly, and the words and images move at different speeds as you scroll down the page.
Cash Security Tec
This site is presented almost entirely in black and white, with a very few touches of bright red. They use large headline text and hollow buttons as you scroll down the page.
Prince AV
This site is quite an experience, the designers have used parallax scrolling, scrolling animations, scrolling on a path and some cool illustrations.
12points.fr
This French site is an infographic about the rules and laws of driving in France. It displays how their points system works, main causes of road traffic accidents and much more. Presented on a black background, the entire site uses a white and shades of green color scheme.
Etnies: Marana Bloodline
This site is presenting a range of sneakers, and it includes videos, falling shoes, a geometric background and many other trending elements, along with some loud rock music.
Willians de Abreu
This art director’s portfolio site is very colorful and has some nice parallax effects. The images on the slide show are interestingly different.
Wander World
This is a mobile app that is basically a travel journal. There are some nice animations and some great scrolling effects on this site.
The Reflex Creative Agency
This site has split screen scrolling – as you scroll down, the right side of the screen flies down and the left side flies up. It works very well on this site.
Chudo
This is a product that I am not quite sure about – you plug it into your mobile phone (for instance), and when you hold it, it uses water in your body to create a healing structure – I think that’s what it does! However, the site is very nicely presented in a minimal style with nice scrolling effects.
Volkswagen Golf Sportsvan
This car advertising site has some beautiful scrolling effects. They use an overlaid circle to magnify areas they wish you to pay attention to, and the whole site is very well constructed.
Unisend
This is a Latin American market for Bitcoins. The site gives an insight into how you can use your Bitcoins through this company. They use horizontal scrolling and nice illustrations and animations.
Wallmob
This company produce cloud-based point of sale software for the iPad. Their site is very clean with a minimal feel, yet also very informative.
Photolab
This Greek photograph printing company use a full width animation with transparency at the top of their page, and the scrolling effects further down are colorful and pleasant.
La Maison Favart
This hotel website has a full screen slide show showing areas of the hotel such as bedrooms, bathrooms, dining room, etc. The theme that runs through this site is diamond shapes – almost all elements are diamond shapes, and they use a background of the same shapes for their contact form at the bottom of the page.
The Royal British Legion
This site explains where the donated money from the Poppy Appeal each year goes. There are some nice scrolling effects and animations throughout this illustrated site.
Sony USA
The flying debris-looking pieces on this landing page eventually make up an image of a couple of guys in an office as you scroll down. This site has some beautiful scrolling and parallax effects.
Michael Gonzalez Attorney At Law
This one page site is very refreshing for the serious business of being an attorney. Michael Gonzalez uses his website to put himself across as a very compassionate human being. His video shows him stating quite obvious things such as how worried you may be that the cops are out to get you or you feel that the judge wants to see you behind bars. He rounds it all off with ‘Whether you hire me or not, I just want you to know that I get it, I get it.’ The site uses transparency with a mesh pattern and some nice parallax effects as you scroll down the page.
Creativity101
This site is advertising a free ebook – it uses solid blocks of color that transition as you move down the page through parallax scrolling, and include some quotes from famous people, such as: ‘all ideas are second-hand, consciously and unconsciously drawn from a million outside sources… It takes a thousand men to invent a steam engine, or a photograph, or a telephone… and the last man gets the credit and we forget the others’ (Mark Twain). The only problem I found with this site is that when I tried to download the ebook I received an error message that there were ‘too many subscribe attempts for this email address.’ However, the site is very well designed.
Sebastien Lempens Design
This site is beautifully designed with some amazing scrolling effects, both parallax and animated.
Knapsack Creative
This is another really well designed site. The parallax scrolling effects are smooth, and they use some very nice hand-drawn icons to represent their services categories. The site is mainly white black and red with only their portfolio section shown in full color.
Highway One Roadtrip
This site is brought to you by Exsus Travel, who I believe are a British company – that is somewhat given away by the spelling of ‘colour’ along the route. Highway One runs for 656 miles along the California coast. Along the way you will encounter guides who will give you information about the area when you click on them, radio stations you can listen to, mailboxes that contain messages for you and streetviews for a closer look at the area. The 17 towns/cities you will scroll through are: Eureka, Leggett, Fort Bragg, Santa Rosa, San Francisco, Santa Cruz, Monterey, Bixby, Big Sur, Cambria, Morro Bay, Pismo, Santa Barbara, Los Angeles, Santa Monica, Venice Beach, Long Beach and San Diego. If you were ever considering a visit to California, this site will help you make up your mind!
Conclusion
Parallax scrolling is rarely the only scrolling effect on websites these days, it usually goes hand in hand with animated scrolling effects and mouse-over effects.
Do you use any scrolling effects on your own site or on your clients’ sites? Do you like these kinds of effects? Which of the above examples excites you the most? Please share your thoughts and links with us in the comments section below.
