jQuery Parallax Tutorial - Animated Header Background

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later.

Download the Images

You'll need four background images:

1. layer1: Main background (e.g., a green vector background).
2. layer2: Overlay image (e.g., a frog, transparent PNG).
3. layer3: Overlay image (e.g., grass, transparent PNG).
4. layer4: Overlay image (e.g., butterflies, transparent PNG).

Find free vector background images at these websites:

• https://www.php.cn/link/88cd5f09652e5b4b12be5e44148c344c
• https://www.php.cn/link/e3a12e198d15821a8fcf98714770bb57
• https://www.php.cn/link/8ec7ff1ac324a4bed44cc51d362e5b94
• https://www.php.cn/link/7de504cb196a4909cba94d8005d2e8df
• https://www.php.cn/link/437d432e126269160c1cc4e0fc72f1ee

(Note: You'll need software like Adobe Illustrator or Photoshop to edit vector files.)

The Code

Include the necessary files in your HTML:

(Note: jquery.event.frame.js might be included in jquery.jparallax.min.js. If so, remove the redundant inclusion.)

Add the image layers to your HTML's :

<div id="parallax" class="clear">
    <div class="parallax-layer" style="width:1200px; height:250px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555324986.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:500px; height:250px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555497450.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:1200px; height:300px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555488103.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
</div>

Initialize the parallax plugin in your HTML's :

jQuery(document).ready(function() {
    $('#parallax .parallax-layer').parallax({
        mouseport: $('#parallax')
    });
});

Add the required 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;
}

Finishing Up

Remember: Child elements of a parallaxed element become layers and are automatically positioned absolutely. The parallaxed element itself needs position: relative; or position: absolute;. overflow: hidden; prevents layers from extending beyond the viewport. Adjust image dimensions to fine-tune animation speeds. Smaller images move faster.

This completes the basic parallax effect. Experiment with image sizes and positions to achieve your desired animation.

The frequently asked questions section has been omitted as it's largely unrelated to the core parallax implementation and adds unnecessary length to the already paraphrased response.

The above is the detailed content of jQuery Parallax Tutorial - Animated Header Background. For more information, please follow other related articles on the PHP Chinese website!