Mobile-friendly Smooth Parallax Scroll Plugin – Universal Parallax

Preview:

Description:

Universal Parallax is a small JavaScript plugin to implement the smooth, mobile-friendly parallax scrolling effect on your web app.

See also:

• Top 10 JavaScript Libraries For Parallax Scroll Effect
• 10 Best Parallax Scrolling Effect jQuery Plugins

Installation:

# NPM
$ npm install universal-parallax --save

How to use it:

Download and import the Universal Parallax’s files into the HTML page.

<link rel="stylesheet" href="universal-parallax.min.css">
<script src="universal-parallax.min.js"></script>

Initialize the Universal Parallax.

new universalParallax().init();

Add the CSS class ‘parallax’ to the parallax container and specify the parallax image using the ‘data-parallax-image’ attribute:

<div class="parallax" data-parallax-image="bg.jpg"></div>

Adjust the scrolling speed during init.

new universalParallax().init({
    speed: 8.0
});

Changelog:

10/08/2019

• v1.3.3: update

02/25/2019

• v1.3.2: update

02/22/2019

• v1.3.1: UP now waits until page is loaded – calculates height of containers better

02/18/2019

• v1.3.0: Parallax BG’s don’t extend beyond bottom if they are in the top of the page + simpler JS for IE 11

10/21/2018

• v1.2.2: Fix for Firefox

07/24/2018

• removed hardware acceleration. Choppy on mobile

07/21/2018

• enabled hardware acceleration on parallax layer

07/13/2018

• CSS update