jQuery: Parallax Scrolling Butterfly - Plugin

JQUERY PARALLAX TUTORIAL – ANIMATED HEADER BACKGROUND

• POSTED BY SAM DEERING
 
• IN JQUERY ANIMATION, JQUERY IMAGE SCRIPTS, JQUERY TUTORIALS, PLUGINS

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

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.

Plain Copy

<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:

Plain Copy

<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:

Plain Copy

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

Also add the css style required for the parallax:

Plain Copy

#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

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!

TAGGED WITH: JQUERY ANIMATED BANNER, JQUERY ANIMATED HEADER, JQUERY PARALLAX EFFECTS, JQUERY PARALLAX EXAMPLE,JQUERY PARALLAX TUTORIAL, JQUERY PARRALLAX, JQUERY PARRALLAX EXAMPLE.