Simple and lightweight library for creating parallax effect
Instalation
npm i @emotionagency/parallax
or
yarn add @emotionagency/parallax
Usage
Basic example
import {Parallax} from '@emotionagency/parallax'
const parallax = new Parallax()
<div data-parallax="0.06"></div> // parallax power, [data-parallax] is the selector that makes the script work
<div data-parallax="0.06" data-parallax-scale="1.07"></div> // scale elem if you need
<div data-parallax="0.06" data-parallax-dir="-1"></div> // parallax direction (default is 1)
Destroy instance
import {Parallax} from '@emotionagency/parallax'
const parallax = new Parallax()
parallax.destroy()
Update nodes
import {Parallax} from '@emotionagency/parallax'
const parallax = new Parallax()
parallax.update()
Reset position
import {Parallax} from '@emotionagency/parallax'
const parallax = new Parallax()
parallax.reset()
Instance options
Option | Type | Default | Description |
---|---|---|---|
inViewDetection |
boolean |
true |
Animation will only happen if the element is in view |
mobile |
boolean |
true |
If true, it will work on mobile devices too. |
breakpoint |
number |
960 |
If mobile is selected false, then this value indicates when the parallax will be disabled. |