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 use MDBParallax and provide imgSrc property with path to your image 

        
            
        import React from 'react';
        import { MDBParallax } from 'mdb-react-parallax';
        
        export default function App() {
          return (
            <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp' />
          );
        }

Direction

Change parallax scroll direction with direction property 

        
            
        import React from 'react';
        import { MDBParallax } from 'mdb-react-parallax';
        
        export default function App() {
          return (
            <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' direction='right' />
          );
        }

Combine horizontal and vertical directions

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' direction='up right' />
              );
            }

Delay

Change delay of the scroll with delay property

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' delay={2} />
              );
            }

Scale

Change scale of the image with scale property

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' scale={1.8} />
              );
            }

Scroll transition

Change default scroll transition timing function with transition property 

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' transition='linear' />
              );
            }

Max transition

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

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' maxTransition={60} />
              );
            }

Max image height

Set maximal parallax container height with maxHeight property

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' maxHeight={400} />
              );
            }

Image alignment

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

Image horizontally aligned

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' horizontalAlignment='left' />
              );
            }

Image vertically aligned

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp' verticalAlignment='up' />
              );
            }

Container overflow

Make parallax overflow its container with overflow< property

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/new/slides/041.webp' direction='right' overflow={true} />
              );
            }

Parallax with content

Place any content inside the parallax by adding it as children of MDBParallax

Parallax content

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

        
            
            import React from 'react';
            import { MDBParallax } from 'mdb-react-parallax';
            
            export default function App() {
              return (
                <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'>
                  <div className="container d-flex justify-content-center align-items-center" style="height: 100%">
                    <div className="card">
                      <div className="card-body">
                        <h5 className="card-title">Card title</h5>
                        <p className="card-text">
                          Some quick example text to show you possibilites of the parallax element.
                        </p>
                        <button type="button" className="btn btn-primary">Button</button>
                      </div>
                    </div>
                  </div>
                </MDBParallax>
              );
            }

Parallax - API

Import

Edit in sandbox 
        
            
        import { MDBParallax } from 'mdb-react-parallax';

Properties

MDBParallax

Name Type Default Description Example
className string '' Adds a custom className to MDBParallax <MDBParallax className='customClass' />
delay number 0.4 Sets the time in seconds in which translation of the image will still be going after the user stops scrolling. <MDBParallax delay={1} />
direction directionCombined 'up' Sets direction in which the image will be translated when scrolling down the page. <MDBParallax direction='right' />
horizontalAlignment 'right' | 'left' | 'center' 'center' Determines which horizontal part of the image will be more visible during the parallax effect. <MDBParallax horizontalAlignment='left' />
imageAlt string '' Sets image alt text for parallax component. <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp' alt='My custom img' />
imageSrc string '' Sets image source for parallax component. Obligatory to instantiate the component. <MDBParallax imageSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp' />
maxHeight number 0 Sets maximal height of the parallax container. <MDBParallax maxHeight={400} />
maxTransition number 0 When maxTransition is set, parallax animation will stop after given percentage of user viewport is scrolled. <MDBParallax maxTransition={40} />
overflow boolean false When set to true, the parallax image will translate out of its container and will overlap content on the page. <MDBParallax overflow={true} />
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. <MDBParallax scale={1.8} />
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'. <MDBParallax transition='ease' />
verticalAlignment 'bottom' | 'center' 'center' Determines which vertical part of the image will be more visible during the parallax effect. Works only when maxHeight is set <MDBParallax verticalAlignment='bottom' maxHeight={400} />
wrapperRef React.RefObject<HTMLDivElement> '' Pass reference to parallax wrapper <MDBParallax ref={myRef} />

Advanced types

directionCombined

Edit in sandbox 
        
            
              type directionVertical = 'up' | 'down';

              type directionHorizontal = 'left' | 'right';

              type directionCombined =
                | directionVertical
                | directionHorizontal
                | `${directionVertical} ${directionHorizontal}`
                | `${directionHorizontal} ${directionVertical}`;