Animated Parallax Effect Background - jQuery4u

File Size: 335 KB
Views Total: 3135
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated Parallax Effect Background - jQuery4u

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


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">
    $('#parallax .parallax-layer')
        mouseport: $('#parallax')

3. Markup

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

4. CSS

#parallax {
   position:relative; overflow:hidden; width:950px; height:250px;
.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.