Vue Bootstrap Parallax
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Vue Bootstrap parallax is a design effect visible while scrolling down - background image is moving with a different speed than the foreground content.
Live demoBasic structure MDB Pro component
HTML construction
<template>
<!-- Main layout -->
<main>
<mdb-parallax
src="https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.webp"
height="full"
factor="1.3">
<mdb-mask overlay="blue-slight" flexCenter>
<mdb-row class="mb-5 pb-5 text-center">
<mdb-col md="12" xl="8" class="mx-auto">
<h1 class="display-3 font-weight-bold">Parallax image with a mask and some content</h1>
</mdb-col>
</mdb-row>
</mdb-mask>
</mdb-parallax>
<mdb-container>
<mdb-row class="my-5 py-4">
<mdb-col md="12" class="text-center">
<p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime.</p>
<p class="mb-0" align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime.</p>
</mdb-col>
</mdb-row>
</mdb-container>
<mdb-parallax src="http://mdbootstrap.com/img/Photos/Others/nature4.webp" factor="1.3" height="600"/>
</main>
<!-- Main layout -->
</template>
<script>
import { mdbParallax, mdbContainer, mdbMask, mdbRow, mdbCol } from 'mdbvue';
export default {
components: {
mdbParallax,
mdbContainer,
mdbMask,
mdbRow,
mdbCol
}
}
</script>
Vue Parallax - API
In this section you will find advanced information about the Vue Parallax component. You will learn which modules are required in this component and what are the possibilities of configuring the component.
Import statement
<script>
import { mdbParallax } from 'mdbvue';
</script>
| Name | Type | Default | Description |
|---|---|---|---|
| src | String | -- |
Points at a resource to get parallaxed |
| height | Number/String | 500 |
The outputted component height in number of pixels or semantic strings - full or half of vieport height. |
| factor | Number | 1 |
Determines speed of the parallax scrolling effect. The distance traversed by the image depends on its size - a factor too big or to small may break / render offesets of the parallax in certain image sizes. In general it is best to keep factor in between 0.5 and 2. |
| hover | Boolean | false |
Mask related prop to fire an effect on hover |
| alt | string | -- |
The alt attribiute for the background image |