Animated Parallax Effect Background - jQuery4u

jQuery4u is a jQuery Parallax Effect Plugin that allows you to create Animated Header Background for your webpage.

Usage:

1. Include necessary javascripts in your head section:

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

2. Call the plugin

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

3. Markup

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

4. CSS

#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;
}

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.