Vue Bootstrap Parallax
Vue Parallax - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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 |