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

Show code

Direction

Change parallax scroll direction with direction property

Show code

Combine horizontal and vertical directions

Show code

Delay

Change delay of the scroll with delay property

Show code

Scale

Change scale of the image with scale property

Show code

Scroll transition

Change default scroll transition timing function with transition

Show code

Max transition

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

Show code

Max image height

Set maximal parallax container height with maxHeight

Show code

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

Show code

Image vertically aligned

Show code

Container overflow

Make parallax overflow its container with overflow<

Show code

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.

Show code