Parallax

Vue Bootstrap 5 Parallax plugin

Parallax is a plugin that adds scrolling effect animation for your images.

Responsive Parallax plugin built with the latest Bootstrap 5. Many customization examples of scrolling effect images animation like scroll delay, scroll direction.

Note: Read the API tab to find all available options and advanced customization

Basic example

To initialize Parallax effect simply use MDBParallax component and provide src property with path to your image 

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/3.webp" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Direction

Change parallax scroll direction with direction property 

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" direction="right" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Combine horizontal and vertical directions

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" direction="up right" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Delay

Change delay of the scroll with delay property

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" :delay="2" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Scale

Change scale of the image with scale property

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" :scale="1.8" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Scroll transition

Change default scroll transition timing function with transition 

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" transition="linear" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Max transition

Change maximum scroll value of the image with maxTransition property. Give values within 0-100 range 

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" :maxTransition="60" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Max image height

Set maximal parallax container height with maxHeight

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" :maxHeight="400" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Image alignment

Horizontal and vertical alignment of the image is set to center by default. Change horizontal alignment with alignHorizontal and vertical with alignVertical (vertical alignment will only work with maxHeight property set)

Image horizontally aligned

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp" alignHorizontal="left" />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Image vertically aligned

<template>
  <MDBParallax
    src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
    :maxHeight="500"
    alignVertical="top"
  />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Container overflow

Make parallax overflow its container with overflow<

<template>
  <MDBParallax src="https://mdbootstrap.com/img/new/slides/041.webp"
    overflow
    direction="right"
    aligHorizontal="left"
  />
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';

  export default {
    components: {
      MDBParallax
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
</script>

Parallax with content

Place any content inside the parallax. MDBParallax is a position: relative container so remember to style your content accordingly

Parallax content

Some quick example text to show you possibilites of the parallax element. 

<template>
  <MDBParallax src="https://mdbootstrap.com/img/Photos/Slides/4.webp">
    <MDBContainer class="d-flex justify-content-center align-items-center" style="height: 100%">
      <MDBCard>
        <MDBCardBody>
          <MDBCardTitle>Parallax content</MDBCardTitle>
          <MDBCardText>
            Some quick example text to show you possibilites of the
            parallax element.
          </MDBCardText>
          <MDBBtn color="primary"> Button </MDBBtn>
        </MDBCardBody>
      </MDBCard>
    </MDBContainer>
  </MDBParallax>
</template>
<script>
  import { MDBParallax } from 'mdb-vue-parallax';
  import { MDBContainer, MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBParallax,
      MDBContainer,
      MDBCard,
      MDBCardBody,
      MDBCardTitle,
      MDBCardText,
      MDBBtn
    }
  };
</script>
<script setup lang="ts">
  import { MDBParallax } from 'mdb-vue-parallax';
  import { MDBContainer, MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn } from 'mdb-vue-ui-kit';
</script>

Parallax - API

Import

<script>
  import {
    MDBParallax
  } from "mdb-vue-parallax";
</script>

Properties

Name Type Default Description
alignHorizontal String 'center' Determines which horizontal part of the image will be more visible during the parallax effect. Possible settings: right | left | center
alignVertical String 'center' Determines which vertical part of the image will be more visible during the parallax effect. Works only when data-mdb-max-height is set. Possible settings: top | bottom | center
delay Number 0.4 Sets the time in seconds in which translation of the image will still be going after the user stops scrolling.
direction String 'up' Sets direction in which the image will be translated when scrolling down the page. Possible settings: up | right | down | left | up left | up right | down left | left right.
maxHeight Number 0 Sets maximal height of the parallax container.
maxTransition Number 0 When maxTransition is set, parallax animation will stop after given percentage of user viewport is scrolled.
overflow Boolean false When set to true, the parallax image will translate out of its container and will overlap content on the page.
scale Number 1.3 Sets scale of the image. The higher the scale is set, the bigger parallax scroll effect will be visible, but the image will lose in quality. To keep the image quality choose higher resolution images or limit the height of the parallax container with maxHeight attribute.
src String ' Sets image source for parallax component. Obligatory to instantiate the component.
transition String 'cubic-bezier(0,0,0,1)' Sets transition timing function for parallax scroll efect. Can receive timing functions such 'ease', 'linear', 'cubic-bezier'.
...
AI Chat