Parallax Scroll Effect For Floating Elements - parallaxImg.js
File Size: | 6.1 MB |
---|---|
Views Total: | 4131 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.