Amazing Parallax Scrolling Effects in Website Design

Amazing Parallax Scrolling Effects in Website Design

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.

Brice Darmon

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.

Cash Security Tec

Prince AV

This site is quite an experience, the designers have used parallax scrolling, scrolling animations, scrolling on a path and some cool illustrations.

Prince AV

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.

12points.fr

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.

Etnies: Marana Bloodline

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.

Willians de Abreu

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.

Wander World

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.

The Reflex Creative Agency

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.

Chudo

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.

Volkswagen Golf Sportsvan

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.

Unisend

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.

Wallmob

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.

Photolab

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.

La Maison Favart

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.

The Royal British Legion

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.

Sony

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.

Michael Gonzalez Attorney At Law

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.

Creativity101

Sebastien Lempens Design

This site is beautifully designed with some amazing scrolling effects, both parallax and animated.

Sebastien Lempens Design

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.

Knapsack Creative

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!

Highway One Roadtrip

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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.