Parallax Scrolling Effects & Scroll Animations In jQuery

A feature-rich yet easy-to-implement jQuery animation plugin that applies a subtle parallax scrolling effect to background images and animates parallax container's child elements when scrolling down the page.

See It In Action:

See Also:

• 10 Best Parallax Scrolling Effects
• 10 Best Scroll-triggered Animation Plugins With JavaScript

How to use it:

1. Load the required JavaScript and CSS files in the document.

<link href="/path/to/jquery.parallax.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.parallax.js"></script>

2. Add a background image to your parallax container using the data-bg attribute:

<div data-bg="bg.jpg">
  ...
</div>

3. Customize the speed rate. Default: 0.3.

<div data-bg="bg.jpg" 
     data-rate="0.5">
     ...
</div>

4. Apply a scroll-triggered reveal animation to child elements using the data-effect attributes. All possible animation types:

• slide-up
• slide-down
• slide-right
• slide-left
• flip-x
• flip-y
• zoom

<div data-bg="bg.jpg" 
     data-rate="0.5"
     data-effect="flip-x">
     <div class="list_item">
       ...
     </div>
     <div class="list_item">
       ...
     </div>
     <div class="list_item">
       ...
     </div>
</div>

5. Initialize the plugin and done.

$('body').parallax();

6. Apply a custom reveal animation to your elements.

<div data-bg="bg.jpg" 
     data-rate="0.5"
     data-func="custom_show">
     ...
</div>

6. Apply a custom reveal animation to your elements.

function custom_show(obj, mode) {
  obj.children().addClass('animation animation_'+mode);
}

Changelog:

2022-11-23

• JS Update

---

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