Press "Enter" to skip to content

A Plugin For jQuery To Create A Parallax Page With A Cool Effect

Jquery parallax plugin specifies the background difference effect for all first-level sub-elements within a given parent and assigns the appearance effect to the next-level descendants of the sub-element.

This plug-in can be used on a personal computer or mobile terminal. If it is a mobile station, it will judge whether the orientation of the phone is correct to ensure the video is shot in the forward direction.

How to make use of it:

1. Load the required JavaScript and CSS information within the doc.

<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 picture to your parallax container utilizing the data-bg attribute:

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

3. Customize the speed fee.

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

4. Apply a scroll-triggered reveal animation to child parts utilizing the data-effect attributes.

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

$('body').parallax();

6. Apply a customized reveal animation to your parts.

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

6. Apply a customized reveal animation to your parts.

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

Parallax Scrolling Effects & Scroll Animations, jquery parallax Plugin/Github


See Demo And Download

Official Website(windy2006): Click Here

This superior jQuery/javascript plugin is developed by windy2006. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.