Parallaxy.js

Installation ?

NPM

                
npm i parallaxy-img
                
            

CDN

                
https://unpkg.com/parallaxy-img@3.0.3/dist/parallaxy.js
                
            

Import

                
//Importing the class
const Parallaxy = require("parallaxy-img");
import Parallaxy from "parallaxy-img";

//Work with only attributes (vue.js, react, angular...)
import "parallaxy-img";
                
            

Without attributes in JS

                
const parallaxy = new Parallaxy(element, {
    'y': {
        speed: 0.5, //speed in pourcentage by default it's 0.3
        invert: false,
        overflow: false
    },
    'x':{
        speed: 0.2, //speed in pourcentage by default it's 0.3
        invert: false,
        overflow: false
    },
    axes: 0.5, //Axes of the parallax (by default it's the middle screen)
    breakPoint: "(max-width: 600px)", //Will stop parallax on mobile for example (default is false)
    scale: 1.5 //Need to be >= 1
});

parallaxy.start(); //Start parallaxy (actived by default)
parallaxy.stop(); //Stop parallaxy
parallaxy.updateConfig(config); //To update the config of the parallax
                
            

Dont forget to center the image into the container

                
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
                
            

Simple example on Y

HTML

Simple example on X

HTML

Simple overflow on X for multiples images

CSS

                
.line-container {
  display: flex;
  margin-left: -20rem;
  white-space: nowrap;
  overflow: hidden;
}

.line-container img {
  width: 10rem;
}
                
            

HTML

Simple example on X and Y

HTML

Simple example on X with overflow

HTML

Simple example on X inverted direction

HTML

Simple example of Parallaxy breakPoint

HTML

Simple example on Y inverted direction

HTML

Simple example of axes

HTML