Parallax
#

Parallax (va-parallax) is a component where the background image is moved at a different speed than the foreground content while scrolling.

Examples
#

Default
#

A block with a background image is displayed by default. You need to pass the src property.

parallax
Open in GitHub

Custom height and speed
#

You can adjust parallax height and scroll speed. Attention, the scrolling speed depends on the ratio of the parallax height to the image height.

parallax
Open in GitHub

Reversed
#

You can flip the parallax scrolling.

parallax
Open in GitHub

Slot
#

You can provide some kind of content over the parallax.

parallax
Open in GitHub

Accessibility
#

Parralax effect is harmful to people with vestibular disorders and should be avoided or used with extreme caution and restraint. If you must use parralax, you should limit usage to one per page and decrease height and speed for each component.

API
#

Props #

NameDescriptionTypesDefault
alt

String

"parallax"

height

Number

400

preset

String

-

reversed

Boolean

false

speed

Number

0.5

src

String

""

target

Object | String

-

Slots #

NameDescription

default

For a content over the parallax

Css Variables #

NameDefault Value
--va-parallax-display block
--va-parallax-width auto
--va-parallax-z-index 0
--va-parallax-image-container-contain strict
--va-parallax-image-container-user-select none
--va-parallax-image-will-change transform
--va-parallax-image-transition 0.3s opacity linear