Add Parallax Scrolling Effect To Background Images – Shifty

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');