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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

To initialize Parallax effect simply add data-mdb-parallax-init attribute to any element and provide data-mdb-image-src attribute with path to your image.

Edit in sandbox 
        
            
          <div data-mdb-parallax-init 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 data-mdb-parallax-init 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 data-mdb-parallax-init 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 data-mdb-parallax-init 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 data-mdb-parallax-init 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 attribute.

Edit in sandbox 
        
            
          <div data-mdb-parallax-init 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-transition attribute. Provide value within the 0-100 range.

Edit in sandbox 
        
            
          <div data-mdb-parallax-init 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 attribute.

Edit in sandbox 
        
            
          <div data-mdb-parallax-init 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 data-mdb-parallax-init 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 data-mdb-parallax-init 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 attribute.

Edit in sandbox 
        
            
          <div data-mdb-parallax-init 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 possibilities of the parallax element.

Edit in sandbox 
        
            
          <div data-mdb-parallax-init 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 possibilities of the parallax element.
                    </p>
                    <button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

Parallax - API

Import

Edit in sandbox 
        
            
          import Parallax from 'mdb-parallax';
        
        
    
        
            
          @import '~mdb-parallax/css/parallax.min.css';

Usage

Via data attributes

Using the Parallax plugin doesn't require any additional JavaScript code - simply add data-mdb-parallax-init attribute to any element and use other data attributes to set all options.

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

Via JavaScript

Edit in sandbox 
        
            
            <div id="parallax" data-mdb-image-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"></div>
          
        
    
        
            
            const parallaxExample = document.getElementById('parallax');
            new Parallax(parallaxExample)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-image-src="".

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, 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 effect. Can receive timing functions such as 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();