Author: | wgalyen |
---|---|
Views Total: | 420 views |
Official Page: | Go to website |
Last Update: | December 8, 2020 |
License: | MIT |
Preview:

Description:
Shifty is a simple JavaScript library that adds a parallax effect to backgrounds by shifting the position of background images on page scroll.
The library also supports responsive image delivery depending on screen size.
How to use it:
1. Install and import the Shifty.
import Shifty from 'shifty';
2. Or load the Shifty.js in the HTML.
<script src="./bundle/shifty.js"></script>
3. Add a background image to your container using the data-img
attribute.
<div class="js-parallax" data-img="bg.jpg" > <p>Keep Scrolling</p> </div>
4. Delivery proper background images to users depending on the screen size.
<div class="js-parallax" data-img="bg.jpg" data-img-768="767x767.jpg" data-img-1024="1023x1023.jpg" > <p>Keep Scrolling</p> </div>
5. Initialize the library and we’re done.
new Shifty('.js-parallax');