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 | Specifies an alternate text for an image |
|
|
| height | Sets a height of the parallax |
|
|
| preset | Named preset combination of component props. |
| - |
| reversed | Flips the parallax scrolling |
|
|
| speed | Sets a speed of the parallax scrolling |
|
|
| src required | URL to the image |
|
|
| target | The element relative to which the component is fixed |
| - |
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 |