50 Parallax Scrolling Website Examples, Plugins and Tutorials

May 13, 2013 · 16 comments

by Sonny M. Day

parallax-scrolling

Nowadays, you can see a lot of websites that break the traditional notions of user navigation experience. One of these new breeds of websites are those that make use of parallax scrolling effects in their backgrounds. Parallax scrolling, the technique employed to create an animated illusion of depth has been quite popular in games and now it has found its way in making website interfaces more interesting and enjoyable. Thanks to talented web designers and developers who are constantly searching for ways to enhance web technologies, notably the creation of responsive mechanisms in web designs, and in the given case, parallax effects. If you want a site like this and have a tight budget I can tell you that some single page templates for WordPress and dedicated parallax website templates have what it takes.

Basically, by the principle, parallax works by having the layers of images in the background images move in a slower pace than the ones in the foreground, thus creating a nice 3D effect. You will see how this concept is put into action in the examples below. Also, because it is incomplete to silently say “wow” we have taken an extra length to share with you some plugins and tutorials that you can use to spice up your website, and if you want to go beyond, learn how parallax scrolling websites are coded in the first place. Explore these resources and don’t forget to give us some feedback!


ElegantThemes
ThemeForest

Advertisement

Examples of Parallax Scrolling in Web Design

Bagigia

bagigia_thumb7

LEAD Enter next level

lead

Nike

nike_thumb3

Cultural Solutions UK

cultural-solutions-UK_thumb4

Jan Ploch

jan-ploch_thumb2

Saucony

saucony_thumb2

Lois Jeans

lois-jeans_thumb2

Egopop

ego-pop_thumb2

Web is Beautiful

web-is-beautiful_thumb2

Manufacture d’Essai

manufacture-dessai_thumb2

Michelberger Booze

michelberger-booze_thumb2

Iutopi

iutopi_thumb3

Finger Billiards

finger-billiards_thumb2

Phase2 Design Studio

phase2-design-studio_thumb2

Tokiolab

tokiolab_thumb3

Old Pulteney

old-pulteney_thumb3

Global TV

global-tv_thumb2

Beercamp

beercamp_thumb2

Krystal Rae

krystal-rae_thumb2

Eric Johansson

eric-johansson_thumb2

Unfold

unfold_thumb2

Netlash bSeen

netlash_thumb2

Cantilever Fish and Chips

cantilever-fish-and-co._thumb2

Mo’s and Bows

mos-and-bows_thumb2

Lost World’s Fair

lost-worlds-fair_thumb2

Marcus Thomas

Marcus-Thomas_thumb2

Ascension Latorre

ascension-latorre_thumb4

Smokey Bones

smokey-bones_thumb2

Ala

ala_thumb2

IWC

iwc_thumb4

Johan Reinhold

johan-reinhold_thumb2

Resolution Interactive Media

resolution-interactive-media_thumb2

Appmiral

appmiral_thumb2

Billy’s Downtown Diner

billys-downtown-diner_thumb2

David Beckham

david-beckham_thumb2

Sullivan NYC

sullivan_thumb2

Parallax Plugins and Tutorials

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

Super Scroll Orama

superscrollorama

Super Scroll Orama is a jQuery plugin for supercool scroll animation. It has awesome animation effects that will really captivate your visitors’ attention.

jQuery Parallax plugin

scrolldeck.js

This jQuery Parallax is a script that simulates the parallax effect as seen on nikebetterworld.com.

jQuery Scroll Path

jquery-scroll-path

Query Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

scrolldeck.js

scrolldeck.js[3]

A jQuery plugin for making scrolling presentation decks. See it in action.

jParallax

jparallax

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

Stellar.js

stellar.js

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.

Curtain.js

curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises. To navigate, you can use your keyboard instead the scrollbar or your mousewheel to navigate into the document. But that’s not all, there is more features! For example, you can easily add a fixed element or multiple “steps” element into a panel.

freshD – 3D Parallax jQuery Plugin with Editor

fresh3d-parallax-jQuery-plugin

freshD – The jQuery 3D Parallax Plugin magically animates your objects in a dynamic created 3D world. For those of you who don’t know what Parallax is, the best way to describe it is the way objects in the background tend to move less than objects closer to the viewer, the most front objects also transform themselves to the viewer’s point of view. 

Background 3D Parallax

background-3d-parallax

The easiest way to get a 3D parallax effect on your website. This plugin allows you to create a full-screen background parallax effect. There are a total of 4 layers that can be animated independently. To setup just choose the pictures, then choose and play with your settings. 

fresh Parallax Under Construction Countdown

parallax-under-construction

fresh Parallax Under Construction upgrades your “Coming Soon” page with a dynamic 3D cloudy sky with your logo or item of choice in focus. It cannot really be described, so please check out the live preview and experience the freshCloud feeling! See how your item of choice will get the attention of your visitors. 

Parallax Slider with jQuery Tutorial

parallax-slider-plugin

This is a tutorial on how to create parallax effects in moving different backgrounds when we slide to an image in order to create some nice perspective. The source code of the effect is readily available.

jQuery Parallax Tutorial – Animated Header Background

jquery-parallax-tutorial

This tutorial will explain in detail how to create your own parallax background effect using jQuery to manage the animation aspects of the banner which you could use for your header background.

One page website, vertical parallax tutorial

one-page-website-vertical-parallax-

Create a Funky Parallax Background Effect using jQuery

scrolling-clouds

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

Build a parallax scrolling website interface with jQuery and CSS

build-a-parallax-website-interface

This tutorials will teach you how to make a beautiful parallax background effect in a website.

Author : Sonny Day

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

{ 16 comments… read them below or add one }

webdizajn May 21, 2013 at 10:04 pm

Hmmm nice inspiration for scrolling site :))

Reply

vijay February 28, 2013 at 8:11 am

awesome links… Thanks. I have tried to create responsive parallax site with help of your articles… http://www.hsj.co.in

Reply

Lars February 28, 2013 at 10:28 pm

Wow thanks for sharing it looks great!

Reply

Raja January 17, 2013 at 8:56 am

All are very nice.

Reply

Sue January 8, 2013 at 5:47 pm

Great list! Another example here

http://www.nowaydaddio.co.uk/

Bit more simple than some here but effective

Reply

Jess S November 28, 2012 at 4:05 am

Killer list. Thanks for inspiring us. Here’s another http://www.drugtreatment.com/ that’s worth adding.

Reply

ZTeK January 30, 2013 at 12:46 pm

Unfortunately as good as that site is it is broken on tablets!..So it is an example of what not to do for mobile platforms at least.

Reply

Tom Schnaars November 13, 2012 at 4:10 am

Nice sites, but y u no link images???

Reply

Aurel October 30, 2012 at 11:55 am

Another cool parralax animation here :
http://www.goldenprophets.com/endoftheworld/
Funny how versatile parralax can be :)

Reply

BlackPaper° October 9, 2012 at 5:30 pm

this one is using a parallax effect with an animation indexed on the Y position :
http://www.chamane-energydrink.com/

Reply

lalit September 29, 2012 at 11:22 am

thanks for sharing these plugin… surely i will use these plugins in my projects
thanks again….

Reply

matt magi August 17, 2012 at 5:55 pm

cant wait to use some of these effects on a site for a new product launch we will be doing soon! thanks.

Reply

Marketing Warwick August 7, 2012 at 8:07 am

Some wonderful sites here! I do love scrolling sites.

Thanks!

Reply

Rhys Little July 31, 2012 at 11:26 am

Here’s one we just completed – pretty cool JS on here and some funky nav – the pullouts work on mobile too :) http://www.heatpumpdryers.com

Reply

Paul Weston July 30, 2012 at 9:46 am

Thought this was a great article and one that will be a valuable resource for me from both a development and design angle. I see a lot of parallax scrolling in a lot of sites these days and what I love about this article is the variety of sites you have put together to show off how it can be used and the fact you have given resources so I can look into how I can use it within my development projects. I loved all the examples you have put together and there are a couple of sites that really stood out for me. The Nike site is one of them and this has to be one of the best examples I have seen. The whole site blows me away every time I see it not only for the parallax scrolling but the design, use of colour and concept. The other site I liked was Beercamp, I love how they have approached using parallax scrolling and it makes the site stand out because it has been used in a different way. Great article and I look forward to more like this from yourself.

Reply

John Bash July 26, 2012 at 9:49 pm

As mentioned in the title itself, this is a GREAT collection. Fell you love with these examples…

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:


Web Analytics