Shifty

A JavaScript library to add parallax effects to background-image

Download GitHub

Reason

There are plenty of libraries out there to add parallax effects
But still, I had reasons to make this library.

1. Simplicity

I just want to add parallax effects to background-image and don't need to add effects to any other elements too

2. Speed Control

Almost all libraries that I encountered, need speed option
but what if the images are too small that that they can't move anymore? In some cases, it's difficult to set the speed of parallax effects.
That's why, I wanted the library to set the speed by itself, so that the whole image will be shown during scroll

Demo

Quick start

Installation

Add the following description in the <head> tag of the web page you want to use Shifty.

You can also bundle the library with Browserify/Webpack

import Shifty from 'shifty'

Just replace the style="background-image:url(...)" with data-img="..."

<div class="js-parallax"
 data-img="https://images.unsplash.com/photo-1565275706395-d452122d6cfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  <p>contents here</p>
</div>

Write the following script

new Shifty('.js-scrollable');

Demo2

Options

breakpoints

You can also set some breakpoints so that you can optimize image size in accordance with the screen size.

Add the following description to the target tag.

<div class="js-parallax"
  data-img="./path/to/default-image"
  data-img-768="./path/to/image-which-size-is-smaller-than-768"
  data-img-1024="./path/to/image-which-size-is-smaller-than-1024"
>
  <p>contents here</p>
</div>

And write the following script

new Shifty('.js-scrollable');

You can also use NodeList instead of string

new Shifty(document.querySelectorAll('.js-scrollable'));

Join development on