Mobile-friendly Smooth Parallax Scroll Plugin – Universal Parallax

Category: Animation , Javascript | February 25, 2019
Author: marrio-h
Views Total: 3,696
Official Page: Go to website
Last Update: February 25, 2019
License: MIT

Preview:

Mobile-friendly Smooth Parallax Scroll Plugin – Universal Parallax

Description:

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

See also:

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:

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

You Might Be Interested In:


One thought on “Mobile-friendly Smooth Parallax Scroll Plugin – Universal Parallax

Leave a Reply