Vue Parallax

Vue Bootstrap Parallax

Vue Bootstrap parallax is a design effect visible while scrolling down - background image is moving with a different speed than the foreground content.

Live demo

Basic structure MDB Pro component

HTML construction


        <template>
          <!-- Main layout -->
          <main>
            <mdb-parallax
            src="https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg"
            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.jpg"  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


import { mdbParallax } from 'mdbvue';
      

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