Add Parallax Scrolling Effect To Background Images – Shifty

Category: Animation , Javascript | December 8, 2020
Author: wgalyen
Views Total: 303 views
Official Page: Go to website
Last Update: December 8, 2020
License: MIT

Preview:

Add Parallax Scrolling Effect To Background Images – Shifty

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

You Might Be Interested In:


Leave a Reply