This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Parallax

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

Usage

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

v-parallax/usage.vue

API

Examples

Misc

Content

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

v-parallax/misc-content.vue

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

v-parallax/misc-custom-height.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.