Back to Vuetify

Parallax

packages/docs/src/pages/en/components/parallax.md

4.1.0956 B
Original Source

Parallax

The v-parallax component creates a 3d effect that makes an image appear to scroll slower than the window.

<PageFeatures />

Usage

A parallax causes a shift in a background image when the user scrolls the page.

<ExamplesExample file="v-parallax/usage" /> <PromotedEntry />

API

ComponentDescription
v-parallaxPrimary Component
<ApiInline hide-links />

Examples

Misc

Content

You can also place any content inside of the parallax. This allows you to use the parallax as a hero image.

<ExamplesExample file="v-parallax/misc-content" />

Welcome

You can use it as a welcome section or as a portfolio hero section.

<ExamplesExample file="v-parallax/misc-welcome" />

Custom height

You can specify a custom height on a parallax. Keep in mind this can break the parallax if your image is not sized properly

<ExamplesExample file="v-parallax/misc-custom-height" />