lightweight-parallax v1.2.1

lightweight-parallax

| A lightweight parallax which gives you easy to use and setup mouse and scroll parallax effects

Install

npm install --save lightweight-parallax

Usage

Call the function with lwPara() or really whatever you want to call it.

To add parallax effects to an element use one of the two classes, but not both:

• para-mouse
• para-scroll

para-mouse

<div class="para-mouse">🚀</div>

para-mouse Options

There's two options for para-mouse that you can use to effect how the element responds:

• data-para-size
• data-para-dir

data-para-size

Adjusts how much the element will move, smaller equals more movement. Keep this between 1 and 10.

<div class="para-mouse" data-para-size="4">🚀</div>

data-para-dir

This is unique to the para-mouse class and will move the element in the opposite direction of the mouse.

<div class="para-mouse" data-para-dir="true">🚀</div>

para-scroll

<div class="para-scroll">🚀</div>

para-scroll Options

This takes one option:

• data-para-size

note: this is shared between data-mouse as well but these values are unique between the two classes.

data-para-size

data-para-size

Adjusts how much the element will move, smaller equals more movement. I'd say keep this quite low, anything more than 10 and elements will be moving very slow.

<div class="para-scroll" data-para-size="2">🚀</div>

React Usage

To call the function in React use the following:

Class Component

componentDidMount() {
  lwPara()
}

Function Component

useEffect(() => lwPara())