Spotify Inspired Parallax Scrolling Effect In Vanilla JavaScript – Paraxify.js

Preview:

Description:

Paraxify.js is a lightweight (3kb minified) JavaScript library for implementing the parallax scroll effect on your background images as you seen on Spotify.com. As you scroll down the page, the background images scroll slower than the foreground with a given animation speed and visible area.

How to use it:

Insert the Paraxify.js or Paraxify.min.js into the bottom of the webpage.

<script src="paraxify.js"></script>

Create a container where you apply the parallax effect to.

<div class="paraxify hero">
  <h1>Paraxify.js Demo</h1>
</div>

The required CSS styles.

.paraxify {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

Add a background image to the container.

.hero { 
  height:400px; 
  background-image: url(hero.jpg);
}

Initialize the Paraxify.js and we’re done.

paraxify('.paraxify');

Adjust the speed of parallax scrolling:

paraxify('.paraxify',{
  speed: 1, // 0 - 1
});

Specify the visible area of parallax image to scroll.

paraxify('.paraxify',{
  boost: 0, // 0 - 1
});

Changelog:

09/03/2018

• Fix issue when image is 100vh/%