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.
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.
Reversed #
You can flip the parallax scrolling.
Slot #
You can provide some kind of content over the parallax.
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 #
| Name | Description | Types | Default |
|---|---|---|---|
| alt |
|
| |
| height |
|
| |
| preset |
| - | |
| reversed |
|
| |
| speed |
|
| |
| src required |
|
| |
| target |
| - |
Slots #
| Name | Description |
|---|---|
default | For a content over the parallax |
Css Variables #
| Name | Default 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 |