Object

Parallax

The behavior whereby a component moves at a speed different from the scroll speed.

Properties

type
string
(Required)

This behavior always has the type parallax.

factor
number

The speed of the component, as a factor of the scroll speed.The value of factor must be between 0.5 and 2.0. Values outside this range will be reset to the minimum or maximum value.

The parallax factor 1.0 is equal to the scroll speed.

A factor lower than 1.0 makes the component move more slowly than the scrolling speed.

A factor higher than 1.0 makes the component move more quickly than the scrolling speed.

Discussion

When you apply the Parallax behavior to a component, the component moves at a different speed than the scroll speed. Use the factor property to set the speed of the component. This video shows an example of the parallax behavior.

Example

{ "components": [ { "role": "figure", "behavior": { "type": "parallax", "factor": 0.8 }, "URL": "bundle://figure.jpg" } ]}

Relationships

Inherits From

See Also

Behaviors

About Component Behaviors

Learn how to affect components’ reactions to device motion and scrolling.

object Behavior

Properties shared by all the behaviors you can use to affect how components react to device motion and scrolling.

object BackgroundMotion

The behavior whereby the background of a component moves in the opposite direction from the motion of the device.

object BackgroundParallax

The behavior whereby the background of a component moves slightly slower than the user’s scroll speed.

object Motion

The behavior whereby a component reacts to the motion of the user’s device.

object Springy

The behavior whereby a component acts as if it is on a short spring.