scroll-parallax-js

ScrollParallaxJS

Light weight Javascript text splitter

ScrollParallaxJS is an easy to use parallax on scroll package. It allow user friendly parallax setings via HTML data-attributes. Only two lines of javascript, non-mandatory custom options, HTML class & attributes and you'r ready to go.

Example — Repository — Questions

Usage

Download the file and include it in your HTML

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

---

Or install and import it as a module

$ npm install scroll-parallax-js

First, import ScrollParallaxJS :

import ScrollParallaxJS from 'scroll-parallax-js';

Then, use ScrollParallaxJS :

<div class="container">
    <!-- You have to wrap your animated elements with .scrollparallaxjs__wrapper -->
    <div class="wrapper scrollparallaxjs__wrapper">
        <!-- You have to use .scrollparallaxjs__el on animated elements -->
        <div
            class="el scrollparallaxjs__el"
            scrollparallaxjs-scale="0.8"
            scrollparallaxjs-y="100"
            scrollparallaxjs-opacity="0.5"
            scrollparallaxjs-duration="1"
        ></div>
        <!-- Define animations on scroll with scrollparallaxjs data attributes -->
        <div
            class="el scrollparallaxjs__el"
            scrollparallaxjs-rotate="45deg"
            scrollparallaxjs-y="-50"
            scrollparallaxjs-delay="0.1"
        ></div>
        <div
            class="el scrollparallaxjs__el"
            scrollparallaxjs-scale="1.2"
            scrollparallaxjs-x="100"
            scrollparallaxjs-y="75"
        ></div>
    </div>
</div>

The css is entirely yours, but you can use my example :

.container {
    width: 100%;
    height: 200vh;
    display: flex;
    justify-content: center;
}
 
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96rem;
    height: calc(100vh - 8rem);
    top: 4rem;
    border: 1px solid red;
}
 
.el {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

// Select the DOM element wich contains the target animation
const container = document.querySelector('.container');
 
// Define the container of the parallax and add options
const containerParallax = new ScrollParallaxJS(container, { simultaneous: false });

Options

ScrollParallaxJS comes with multiples options :

{
    duration: '100%',
    triggerHook: 0,
    offset: 0,
    pinned: true,
    indicators: false,
    simultaneous: true,
    prefix: 'scrollparallaxjs'
}

You can overwrite theses options when you create a new parallax :

const container = document.querySelector('.container');
const scrollParallax = new ScrollParallaxJS(container, { duration: 50%, pinned: false, prefix: 'custom-prefix' });

Change log

Releases