Advanced Search

Return to Snippet

Revision: 44586
at April 14, 2011 16:47 by jquery4u
Initial Code 
JQUERY
jQuery(document).ready(function($) {
    jQuery('#parallax').jparallax();
});

HTML
<div id="parallax">
  <img src="grass.png" alt="" style="width:1200px; height:250px;"/>
  <img src="frog.png" alt="" style="width:500px; height:250px;"/>
  <img src="butterflies.png" alt="" style="width:1200px; height:300px;"/>
</div>

CSS
#parallax {
   position:relative; overflow:hidden; width:950px; height:250px;
   background-image:url('background.jpg');
}
Initial URL 
http://www.jquery4u.com/animation/jquery-parallax-tutorial/
Initial Description 
think we all agree that the parallax effect is pretty awesome and 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.
Initial Title 
jQuery Parallax Tutorial – Animated Banner
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery