Parallax Scrolling Effects & Scroll Animations In jQuery

Parallax Scrolling Effects & Scroll Animations In jQuery
File Size: 9.92 KB
Views Total: 1245
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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

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