Author: | alxv2016 |
---|---|
Views Total: | 2,239 views |
Official Page: | Go to website |
Last Update: | July 13, 2019 |
License: | MIT |
Preview:

Description:
A dependency-free JavaScript library to implement the Parallax Scrolling effect on your background images using requestAnimationFrame() API.
How to use it:
Add the parallax block with a background image to a container:
<div class="para-container"> <div class="para-block" style="background-image: url('bg.jpg')"> </div> </div> </div>
The parallax container must have a fixed height.
.para-container { overflow: hidden; height: 220px; }
The required CSS styles for the parallax block.
.para-container .para-block { width: 100%; height: 140%; will-change: transform; background-repeat: no-repeat; background-position: top center; background-size: cover; }
Initialize the parallax library and done.
pv.init();
All default settings to customize the parallax effect.
pv.init({ container : { class : 'para-container', height : undefined }, block : { class : 'para-block', speed : -Math.PI, image : undefined } });
Changelog:
v1.2.0 (07/13/2019)
- Migrate to typescript
v1.1.3 (06/19/2018)
- Replaced spreader with for-loop for browser support