jQuery Parallax Tutorial – Animated Header Background

Sam Deering

jquery4u-parallax-effect

I think we all agree that the parallax effect can get you that WOW factor when someone visits your website. So, I thought i would show you a live jQuery parallax example. In this tutorial i 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.

Update: The Parallax Plugin demo now works on jQuery 1.6.4+. I have updated this post, the demo and new download package to include working functionality with the new version of jQuery. Happy parallaxing!

DemoDownload

The Images

You will need the background images for the parallax banner. I have chosen to go with 4 images to keep it basic. I have chosen the following 4 images (note that images 2,3,4 are transparent png’s):

  1. Image layer1: The main background – green vector background
  2. Image layer2: Overlay image – the frog
  3. Image layer3: Overlay image – the grass
  4. Image layer4: Overlay image – the butterflies

jquery-parallax-instruction2

Here a few websites where you can get free vector background images:
http://www.freevectordownload.com/Free_Vector_Banners.asp
http://www.vectorportal.com/
http://www.vectorjungle.com/
http://www.vectorjunky.com/
http://www.vecteezy.com/

Note: To edit vector files you will need an editor such as Adobe Illustrator/Photoshop.

The Code

You will need the jparallax plugin, the jquery.event.frame and latest version of jQuery – include this in your source code. *The jparrallax.js plugin may already contain jquery.event.frame.js methods, if so you can remove it from the includes below.

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
<script type="text/javascript" src="js/jquery.event.frame.js"></script>

Now we add the images to the html code using the following markup structure into your body tag:

<div id="parallax" class="clear">
	<div class="parallax-layer" style="width:1200px; height:250px;">
		<img src="images/grass.png" />
	</div>
	<div class="parallax-layer" style="width:500px; height:250px;">
		<img src="images/frog2.png" />
	</div>
   <div class="parallax-layer" style="width:1200px; height:300px;">
		<img src="images/butterflies3.png" />
   </div>
</div>

Then you add the jQuery code to initialise the parallax plugin into your head tag:

<script type="text/javascript">
jQuery(document).ready(function() 
{
	$('#parallax .parallax-layer')
	.parallax({
		mouseport: $('#parallax')
	});
});
</script>  

Also add the css style required for the parallax:

#parallax {
   position:relative; overflow:hidden; width:950px; height:250px;
   background-image:url('background.jpg');
}
.parallax-viewport {
    position: relative;     /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
}

Finishing up

jquery-parallax-instruction1

Children of a parallaxed element become layers, and are automatically given position:absolute; in order to start moving them around, but the parallaxed element itself needs position:relative; or position:absolute; or the layers will move relative to the document rather than the viewport. overflow:hidden; stops layers displaying outside of the bounds of the viewport, and width and height should be set to prevent the viewport collapsing.

Tip: play around with the layer image dimensions to get the animation speeds that you want. The smaller the image compared to the background layer the faster it will move when the mouse hovers. The frog only moves left and right, this is achieved by having the same height as the window (background element) but a smaller width. The butterflies is the opposite effect and move when the mouse goes up and down.

That’s pretty much it. Hope you have fun creating your own jQuery animated parallax banners!

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://techtricky.com techtricky

    useful plug in….well explained

  • http://www.amitpatil.me Amit

    You will see this as my header sooon !

  • http://www.honeybearplayhomes.com/ Ed

    Wowser that is awesome… I couldn’t be happier with how it makes my website look now… Totally cool.

    Makes me want to do a nautical themed site now. ;)

    http://www.honeybearplayhomes.com/

    Thanks so much…

  • jquery4u

    @techtricky – thanks mate.
    @Amit – let us know about it!
    @Ed – great design mate, good to see the tutorial put to use!

    • http://www.honeybearplayhomes.com/ Ed

      I’m seeing moving bees everywhere Mate… ;) Thanks again.

      Added it to my footer in addition to the banner now and it looks awesome at any screen resolution.

      Only problem I am running into is upon page scroll the footer freezes and does not function. scroll back up and it works again. Played around with numerous position settings on both the CSS and the script with the same outcome. Tre bizarre indeed… Any thoughts (I hope)?

      My test site has less content in the source to look at: http://beartest.yolasite.com/index4.php

      With this my site is now looking exactly like I had envisioned when I began building it. Thanks for that.

      Bright, colorful, cheery, kid friendly and interactive. Couldn’t be happier.

      • http://www.honeybearplayhomes.com/ Ed

        Odd that when I scroll down and mouse over the footer it does not move but when I mouse over on the page where the footer was before the scroll the footer moves. Maybe a page height setting perhaps?

        Wish that the brain seizures didn’t wipe away my smarts like they did or I would have figured out this one long ago. ;)

        Thanks anyway…

  • http://dreamaginarius.blogspot.com/ Karla

    Hi!

    How could I edit the width of the Window? I want to implement on my blog so it will cover the size of my banner. Or the other idea I had is to make it seamlessly move with no frame.

    I am not very computer savvy, I hope I was clear.

    thanks for your help!

  • Joaquin

    in which part of code can handle the speed of each layer?

  • Daniel

    Here it works with jQuery 1.6.2, I am using this one: https://github.com/stephband/jparallax

  • http://www.phoechan.com phoechan

    Can’t work with jQuery 1.6.2
    How to solve this problem?
    if you can solve and please reply me
    Anyway thanks you so much :)

    • jquery4u

      @phoechan – as Daniel suggested maybe try using this version of the plugin https://github.com/stephband/jparallax. I haven’t tried this one out yet though. Will keep you updated.

  • http://www.pewterbirduk.com Ian Rendall

    Hi all,
    I’ve managed to get this working, to an extent.
    What I want to use is at http://www.pewterbirduk.com/test.html
    But when I insert the code, I get this at http://www.pewterbirduk.com
    Can anyone help?

  • http://www.pewterbirduk.com Ian Rendall

    I Have had to change back to a static header, as it’s my business website. But what happens basically is that the movement of the layers is fine, but all the images except the background appear vertically squashed. I am using WordPress.

  • http://www.johanniter.de// bnOne

    Thx m8. Nice site feature to give it some movement and kinda interaction, without using flash! I’ll try using this on my next project ;-)

  • http://walfive3.com piyushwalia

    thanx for ur article.it helped me lot to understand and perform parallax as it was not an easy task….thanks a lot

  • http://rafalgicgier.pl Rafal

    Hey,

    Nice tutorial but I believe that teaching something that works only with old jQuery is totally pointless.

    You can find the recent version of this plugin here: https://github.com/stephband/jparallax

    Usually interactive websites use more than one jQuery plugin and using the old version would simply disable everything else apart from the parallax,

    Regards,
    Rafal

  • http://www.infyways.com Mark Willam

    Very helpful, Very nicely written
    Thank you so much for sharing.

  • http://akhmads.com akhmad

    thanks! very helpful…

  • http://www.electic.lv electic

    Thank you, that’s great tutorial to understand a little bit how it works. It helps me.

  • http://apartmentscrimea.com/ Irena

    AMAZING!!! Thank you!

  • mo

    Erm, is it just me or does this not work in ie?

  • Joachim

    Very nice tutorial!

    Just one quick question:
    How can i adjust it so that it tracks my mouse on the entire page instead of just the parallex div?

    Thanks so much!

  • http://www.gamesx.ro condei valentin

    great !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

  • Vivi

    I managed to make it work, but it only works properly in firefox, is there a way to make it work well in chrome and other browsers too?

  • http://www.stunningscotland.com Andrew Brockie

    Thanks. This was a well explained tutorial. Does anyone know how to use parallax over an object? I am using a class to give a water effect to the bottom of my background image. This is visible but the other images are hidden behind the background image. Thanks for any suggestions…. have tried z-index etc with no effect.

    • http://N/A joshua Overbye

      did you try and change the elements you want infront of the bg layer, but after the of the water layers in the code?

  • http://N/A joshua Overbye

    Hi, Just wanted to say thanks for the tutorial, it was my first time using it for a beginner like myself.

    I got the code working perfectly the way I wanted. but I have stumbled on problem with intergrading the effect when placing it on my website.

    The problem code seems to be

    $(function() {
    $(‘ul.nav a’).bind(‘click’,function(event){
    var $anchor = $(this);
    /*
    if you want to use one of the easing effects:
    $(‘html, body’).stop().animate({
    scrollLeft: $($anchor.attr(‘href’)).offset().left
    }, 1500,’easeInOutExpo’);
    */
    $(‘html, body’).stop().animate({
    scrollLeft: $($anchor.attr(‘href’)).offset().left
    }, 1000);
    event.preventDefault();
    });
    });

    it is a code for a anchor point scroll left 1000px animation.

    I really need both to work, can anyone see any clashing problems with the 2 codes?

  • http://N/A joshua Overbye

    I figured it out, but.

    Im trying to get 2 of of the parallax elements on the one page, how can I make this work?

    • http://top10googletrends.com BennyB

      This is possible, not sure how but i have seen it before!

  • Venkatesh

    Wow…this is good looking. But its not working in
    IE…

    • jquery4u

      @Venkatesh, yes I ran into quite a few problems trying to support versions of IE. Sometimes it would work, sometimes not. Are specific versions of IE your targeting or just IE in general 7+?

      • Venkatesh

        Thanks for your reply, i looking for IE 7 +…

      • venkatesh

        i looking IE7+….

  • Mark

    Okay I cannot get this to work at all. I’ve copied all the codes, renamed the files to mine, included them in the same directory but upon seeing the page load, the three PNG images I’ve made are all over the place, and the background image is nowhere to be seen! Help much appreciated.

    • http://jquery4u.com/ jQuery4u

      Hi Mark, have you got the code online at all so I can take a look? ps – sorry for late reply I didn’t see you comment.

  • Aaaaa

    awe some
     

  • Bcv

    fgvfb

  • http://www.facebook.com/henry.roberto.9 Henry Roberto

    not working with IE, even in IE8 and IE9.
    anyone can help?

    • http://jquery4u.com/ jQuery4u

      Hi Henry, unfortunately I haven’t paid the IE tax on this demo, I’m sure i could get it working in IE i’ll see if I can fix it up.
      Sam

  • http://www.facebook.com/henry.roberto.9 Henry Roberto

    I have another question.
    Can u manage to put hyperlink on the frog image?
    Since it placed behind the butterflies layer, i don’t know how to do it. Thx.

  • maxisix

    how did u lock the orientation of the frog ?

    • http://jquery4u.com/ jQuery4u

      Hi maxisix, by orientation do you mean the speed of the animation or when it’s viewed on iPad changing orientation? The speed of the frog layer is controlled by the speed and size of the layer giving it the appearance of being locked to the mouse.
      Sam

  • Norm

    The download demo works in Internet Explorer if you add this css tag after the on the index.html page: div { border: 0px; }

    • http://jquery4u.com/ jQuery4u

      Thanks Norm.

  • milad

    great

  • gayatri

    Hi, I am new developer this tutorial actually i using in banner their i need auto moving grass effect can this possible ? can any one help me

  • Dru

    Great tutorial, but I can’t get it to work on IE, I noticed it works great on ie10 using windows 8, but windows 7 with ie9 or ie7 doesn’t work and it is driving me crazy. I have tried many things from ie securities to updated js and nothing. I even tried adding the TAG that norm suggested and nothing. If anyone has an idea feel to write me to aamg37@hotmail.com

    • http://jquery4u.com/ jQuery4u

      Hi Dru, I take it your referring to an early version of IE as the demo works in IE9+. I can also confirm this plugin DOES work in ALL versions of IE8+, even IE7 could work with some extra focus on the CSS in an IE7 stylesheet. I have implemented it here for a project: http://zoom.abc.net.au/ so this may help assist in getting you there.
      Sam

  • Aadil

    Hey great tutorials but it hangs when i apply with 4-5 png images Any solutions ?? Thanks

    • http://jquery4u.com/ jQuery4u

      Hi Aadil, how large are your images? I have done this parallax with over 10 images and works fine.

  • http://twitter.com/MarkDMedia Mark Digital Media

    Still not working for I.E?
    Any chance of an update? I cant see how this would be really useful without it?!

    • http://jquery4u.com/ jQuery4u

      Hi Mark, I take it your referring to an early version of IE as the demo works in IE9+. I can also confirm this plugin DOES work in ALL versions of IE8+, even IE7 could work with some extra focus on the CSS in an IE7 stylesheet. I have implemented it here for a project: http://zoom.abc.net.au/ so this may help assist in getting you there.
      Sam

  • agon024

    This would be great if parallaxing worked on Iphone and Ipads…But it don’t. Even with stellar.js it doesn’t work right

  • ali_siddique

    Great tutorials

  • Mart Laub

    Great tutorial , just what i was looking for .. well almost .. do you have a plugin or module like this for Joomla 3.x or 2.5.x ? Would be much appreciated :)

  • Pitamber Rawat

    how do i decrease the speed of frog

  • jacon

    wow! tutorial and the way u explained things ..hats off man

  • Le Cyco

    can i use this for my template for theme forest ?

  • antony492

    Does still work on mobiles and touch screens?

  • Niso

    Seems not work for me with jQuery 1.9 – Am i missing something ?

  • Yashesh Vaghela

    a really great tutorial..

    this is what i made using skrollr and svg only.

    http://milanart.in/philosophy/

    keep skrolling :)

    • http://jquery4u.com/ jQuery4u

      Awesome great job! :)

    • Adalinka

      This looks great! Cool work Yashesh! :-)

    • anjelina

      awesome yashesh (y) like it

    • http://iminweb.com/ Niloy Sarker

      Very nice

    • zietbukuel

      I only see a white page.

  • Three (A)

    Is there a way to make it vertical shaped instead of horizontal, occupying a third of the website? Also is there a way to add another 2 pictures like an automatic slideshow?

    • Three (A)

      also noticed that in Internet Explorer8 it doesn’t work with my website while at Mozilla and Chrome perfect,but when I put the link of your website with the demo it works, why is that?

  • Three (A)

    I asked about 12 days ago if it was posible to make more of a vertical version of this, even square shaped, can it be made? I tried but I noticed everything got distorted, the change must be within the js function itself but I just started learning javascript so this is pretty new to me. As I’m building a website this would be perfect to add for a specific image, it would be for a non commercial use. Can you please let me know.

  • cgrclk

    I’ve integrated the code. But the animations are very very very slow. Very lagy. What can it be this issue’s source? And what can i do for resolve the issue? Thanks.

  • http://iminweb.com/ Niloy Sarker

    Nice tutorial
    Thanks

  • Axor

    How to download this, please?

  • baronnath

    It doesn’t work with jQuery last version