Parallax Scroll Effect For Floating Elements - parallaxImg.js

parallaxImg.js is a small yet configurable parallax scroll jQuery plugin that makes floating elements scrolls at a different speed when the user scrolls down/up the page.

The plugin also provides a scroll-trigged animation that fades in/out floating elements as they enter or exit the current viewport.

How to use it:

1. Add both jQuery library and the parallaxImg.js script to the web page.

<script src="/path/to/cdn/jquery.js"></script>
<script src="/path/to/parallaxImg.js""></script>

2. Add the parallax-move css to the parallax elements and config the parallax effect with the following data attributes:

• data-ps-z-index: z-index property
• data-ps-speed: scrolling speed
• data-ps-vertical-position: vertical position in pixels
• data-ps-horizontal-position: horizontal position in pixels

<img src="1.jpg" 
     class="parallax-move" 
     data-ps-z-index="1" 
     data-ps-speed="1"
     data-ps-vertical-position="700" 
     data-ps-horizontal-position="420"
     />

3. Then wrap the elements into a container with the CSS class of parallax-img-container.

<div class="parallax-img-container">
  <img src="1.jpg" 
     class="parallax-move" 
     data-ps-z-index="1" 
     data-ps-speed="1"
     data-ps-vertical-position="700" 
     data-ps-horizontal-position="420"
     />

  <img src="2.jpg" 
     class="parallax-move" 
     data-ps-z-index="1" 
     data-ps-speed=".5"
     data-ps-vertical-position="700" 
     data-ps-horizontal-position="220"
     />
</div>

4. Initialize the plugin on document ready and done.

$(function(){
  parallaxImgScroll();
});

5. Apply fade in/out animations to the elements.

parallaxImgScroll({
  initialOpacity: 1,
  opacitySpeed: 0.1
});

6. Determine whether to display a loading indicator until all elements are successfully loaded. Default: false.

parallaxImgScroll({
  pageLoader: true
});

---

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