Author: | appleple |
---|---|
Views Total: | 780 views |
Official Page: | Go to website |
Last Update: | March 22, 2022 |
License: | MIT |
Preview:

Description:
Backpax is a JavaScript library that applies a smooth parallax scrolling effect to background images.
Also comes with a responsive image delivery feature that dynamically loads appropriate background images based on the screen size.
How to use it:
1. Install and import the Backpax.
# NPM $ npm i backpax
import Backpax from 'backpax';
2. Or load the backpax.js
JavaScript library in the document.
<script src="bundle/backpax.js"></script>
3. Initialize the Backpax library and we’re ready to go.
new Backpax('.js-parallax');
4. Add a parallax image to your container. That’s it.
<div class="js-parallax parallax" data-img="/path/to/bg.jpg"> </div>
5. Deal with responsive image delivery using the data-img-BREAKPOINT
attribute:
<div class="js-parallax parallax" data-img="/path/to/bg.jpg" data-img-768="/path/to/small.jpg" data-img-1024="/path/to/large.jpg" >
Changelog:
v1.0.7 (03/22/2022)
- improved performance