README.md

Parallax

Parallax is an effect where some elements on the screen move slower or faster than others when scrolling, generating a depth perception.

Declaration

To declare a parallax, add the attribute data-parallax to your HTML element:

<div data-parallax></div>

Properties

These are the general properties you can change:

• Type
• Speed
• Momentum
• Ease
• Stagger
• Enabled

These are the properties that become available when the parallax type is scene:

• Trigger Element
• Hook
• Duration
• Offset
• Indicator

Properties Attribution

There are 3 ways to set parallax properties:

• Default Properties
• Attribute Properties
• Mixed Properties

Default Properties

It changes all the parallax elements inside a container at once.

You can do that by defining a set of properties using the exposed ScrollXP.Parallax builder class.

Example:

import ScrollXP from "scrollxp"

let view = new ScrollXP({
  container: document.body,
})

view.setDefault(new ScrollXP.Parallax().speed(2).build())

In the above example, all the parallax elements inside the body will have the same speed ratio of 1/2.

Attribute Properties

It changes the parallax properties for a specific HTML element.

You can do that by adding data-parallax-[property-name] to the HTML element of the parallax.

Example:

<div data-parallax data-parallax-momentum="1"></div>

In the above example, the parallax animation will continue running for 1 second after the scroll stops.

Mixed Properties

The previous properties can be combined or overridden by following the priorities sequence below:

Default properties < Attribute properties

Example:

import ScrollXP from "scrollxp"

let view = new ScrollXP({
  container: document.body,
})

let defaultParallax = new ScrollXP.Parallax().speed(3).build()

view.setDefault(defaultParallax)

Then you can refer to it in the HTML:

<!-- Parallax 1 -->
<div data-parallax></div>
<!-- Parallax 2 -->
<div data-parallax data-parallax-speed="4" data-parallax-momentum="1"></div>

In the above example, the parallaxes will have the following properties.

Parallax 1:

• speed: 3

Parallax 2:

• speed: 4
• momentum: 1

See full documentation.