Parallax

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 add parallax class to any element and provide data-mdb-image-src attribute with path to your image

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp" ></div>

Direction

Change parallax scroll direction with data-mdb-direction attribute

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-direction="right"></div>

Combine horizontal and vertical directions

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-direction="up right"></div>

Delay

Change delay of the scroll with data-mdb-delay attribute

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-delay="2"></div>

Scale

Change scale of the image with data-mdb-scale attribute

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-scale="1.8"></div>

Scroll transition

Change default scroll transition timing function with data-mdb-transition

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-transition="linear"></div>

Max transition

Change maximum scroll value of the image with data-mdb-max-transiton attribute. Give values within 0-100 range

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-max-transition="60"></div>

Max image height

Set maximal parallax container height with data-mdb-max-height

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-max-height="400"></div>

Image alignment

Horizontal and vertical alignment of the image is set to center by default. Change horizontal alignment with data-mdb-horizontal-alignment and vertical with data-mdb-vertical-alignment (vertical alignment will only work with data-mdb-max-height set)

Image horizontally aligned

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-horizontal-alignment="left"></div>

Image vertically aligned

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
            data-mdb-max-height="500" data-mdb-vertical-alignment="top"></div>

Container overflow

Make parallax overflow its container with data-mdb-overflow

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" data-mdb-overflow="true" data-mdb-direction="right"></div>

Parallax with content

Place any content inside the parallax by adding div with class parallax-content and your content inside parallax container

Parallax content

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

Edit in sandbox 
        
            
          <div class="parallax" data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp">
            <div class="parallax-content" >
              <div class="container d-flex justify-content-center align-items-center" style="height: 100%">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">
                      Some quick example text to show you possibilites of the parallax element.
                    </p>
                    <button type="button" class="btn btn-primary">Button</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

Parallax - API

Usage

Via data attributes

Instantiate parralax scroll effect for the image by adding parallax class to any element and provide obligatory data-mdb-image-src attribute with path to your image

Edit in sandbox 
        
            
        <div class="parallax" data-mdb-image-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"></div>

Options

Options can be passed via data attributes. Append the option name to data-mdb-, as in data-mdb-delay="0.4".

Name Type Default Description
imageSrc String ' Sets image source for parallax component. Obligatory to instantiate the component.
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.
delay Number 0.4 Sets the time in seconds in which translation of the image will still be going after the user stops scrolling.
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 data-mdb-max-height attribute.
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'.
maxTransition Number 0 When data-mdb-max-transition is set, parallax animation will stop after given percentage of user viewport is scrolled.
maxHeight Number 0 Sets maximal height of the parallax container.
horizontalAlignment String 'center' Determines which horizontal part of the image will be more visible during the parallax effect. Possible settings: right | left | center
verticalAlignment 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
overflow Boolean false When set to true, the parallax image will translate out of its container and will overlap content on the page.

Methods

Name Parameters Description Example
dispose Removes the Parallax instance. instance.dispose()
getInstance element Static method which allows to get the parallax instance associated with a DOM element. Parallax.getInstance(element)
init element Static method which allows to create Parallax instance from element dynamically added to DOM Parallax.init(element)
Edit in sandbox 
        
            
        const parallaxElement = document.getElementById('my-parallax-container');
        const instance = Parallax.getInstance(parallaxElement);
        instance.dispose();

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
        import Parallax from 'mdb-parallax';