Everything you need to know about Parallax

jquery-css-parallax-animation

1. What is parallax?

If you are looking for a definition of parallax, here it goes. As far as the web (especially design) industry is concerned, parallax is the arrangement/animation of images in a way that lets you feel the distance between them.

Everything about parallax

For example, imagine that you are looking through the window of a moving vehicle. You will see the objects closer to you moving faster compared to the distant ones. The sun stays still while the trees, buildings and other objects move.

In this post I would like to walk you through different posts, examples and tutorials that would help you achieve this effect.

This technique was initially used in 2d video games and now mostly seen in single page portfolio websites and website headers.

2. Parallax in use

I would like to show you a few hand-picked websites that uses parallax before I proceed.

Eric J – This is one of my favorite websites using Parallax in the way it should be. The motion of the wheel and the smoke that comes out of the silencer as the scooter moves adds up to the parallax feel.

ericj

Markus Neidel – This is an awesome 3d vertical parallax (flash).

Markus Neidel - Flash

Silverback – To see the effect in this site, you would have to resize your browser window and notice the header region.

Silverback - CSS Background parallax

Umaghet Zeggen – All you need to do is move your mouse (towards any direction).

http://www.umaghetzeggen.nl/

Squaredeye – Resize your browser window and notice the movement of clouds in the header. A css based parallax.

Squaredeye Header

Dezignus – Move your mouse over the header region (towards any direction).

designus

3. Now, how do I create Parallax?

Let’s see how to create this effect using javascript, flash and other frameworks.

Using JQuery

You’d probably be aware, I am a JQuery fan and for that reason I would like to first list down the methods using JQuery to achieve the Parallax effect.

These tutorials use jparallax – a jQuery plugin to create parallax

jParallax - A jQuery Parallax Plugin

Create a Parallax Website Header

progtuts - jParallax header

Using Mootools

Not familiar with JQuery huh? Here goes a tutorial that uses mParallax a mootools adaptation similar to jParallax.

piksite mParallax

Another demo using Mootools

csslab - Mootools

Using Scriptaculous

This one uses scriptaculous another popular javascript framework.

offtheline - Scriptaculous

Using Javascript – A Vertical Parallax

A vertical parallax based on javascript.
innergeek

Using pure CSS

Unlike the ones above, this would work only when the user re-sizes the browser window. This is achieved using css positioning.

A tutorial on how to create the Silverback Parallax (shown above) using CSS.

carsonified

Examples of and How to Create the CSS Parallax Effect

forthelose

This is a really interesting one! A parallax illusion with CSS

marcofolio - Parallax Illusion

Parallax using Flash

A step by step tutorial by webdesignerwall.

webdesignerwall

Creating parallax with flash cs4

webdesignorg

Are you an AfterEffects freak?

If so, this tutorial is for you. Create a Realistic Camera Move with Parallax.

tutplus - Aftereffects Parallax

So, that’s all about Parallax. I hope this post was informative

About Gopal Raju

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India. Catch up with him on dribbble, Twitter and Facebook.

25 Responses to Everything you need to know about Parallax

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Great post! here other good example: http://www.attackemart.in/

  2. before seeing your website indofolio.com i have no idea about parallax…u have done a great job at indofolio…

  3. Great roundup of parallax effects! I worked with the effect some at http://www.curiositadesigns.com … would love some feedback!

  4. Pingback: New JavaScript Technique? - SitePoint Forums

  5. A few that I haven’t seen… Cool.

    Couldn’t be happier with how my new parallax banner looks…

    http://www.honeybearplayhomes.com/

    Too much fun designing it. ;)

  6. It’s really great intro about Parallax. I always visit your Blog please always post unique CSS tutorial like Parallax.

    Thanks
    Sanjay Gupta

  7. Very informative….. I’ll be using Parallax technology in my site too!…
    Thanks for this great intro about Parallax!!

  8. Pingback: Announcing the launch of IndoFolio - Productivedreams.com

  9. Wow…loved the effect. Nice examples

  10. Had no ldea this was called parallax, but I did use it a few years ago, just found it out by accident ; )

  11. this effect is cool .. ll try out soon..

  12. I am laughing amazed seeing Eric J site, but somehow, my head spins watching that animation.

  13. nice article, I really liked the parallax effect of eric and dezignus …..cool!

  14. i’m laughing amazed seeing eric j site, but somehow, my head spins watching that animation…lol
    cool site!

  15. Pingback: El efecto parallax en la web « In Nomine Pixel

  16. Hey hey !
    I’m always very impatient to read your new articles.
    This one is like the others : fresh and very good for inspiration.
    Thanks for sharing Gopal :)
    Kind regards my friend

    • Thanks buddy :) I feel Parallax is still not that popular among designers and that made me come up with this post.

  17. Parallax was here even before we knew its name and now as technology is progressing this could be used more effectively to make more interesting websites

    • Yes Don, I hope this article inspires the design community to come up with interesting concepts like this.

  18. Great article – really love the parallax effect! Gives websites really some “extra depth”.

    Thanks a lot for this article and the inclusion of the CSS Parallax Illusion on Marcofolio.net !

  19. Parallax looks great. I really like your website design (especially the comment box and jquery sidebar).