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.