React Parallax

React Parallax - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Overview

Bootstrap parallax is a design effect visible while scrolling down - background image is moving with a different speed than the foreground content.

Required external library

Since MDBReact 4.25.0 version this functionality requires the installation of an external library - jarallax.

To make the Parallax component easier to use after changes, we've created a special component MDBParallaxWrapper that you should copy into your project and use it exactly as the Parallax component before version 4.25.0.

Install it with the following command, then configure it as follows:

  1. npm install jarallax --save
  2. Create MDBParallaxWrapper component into your project folder and paste code from below.
  3. Add MDBParallaxWrapper import to page where you want to use MDBParallax
  4. Use exactly the same like MDBParallax component before 4.25.0 version.

MDBParallaxWrapper component:

Please create new component and phase to it a code below.

        
            
            import React, { Component } from 'react';
            import PropTypes from 'prop-types';
            import { jarallax, jarallaxVideo, jarallaxElement } from 'jarallax';
            import { MDBParallax } from 'mdbreact';
  
            class MDBParallaxWrapper extends Component {
              jarallax = React.createRef();
  
              componentDidMount() {
                const {
                  image,
                  video,
                  element,
                  elementOptions,
                  disableParallax,
                  disableVideo,
                  disableVideoLazyLoading,
                  disableVideoLoop,
                  disableVideoPlayOnlyVisible,
                  elementInViewport,
                  imgElement,
                  imgPosition,
                  imgRepeat,
                  imgSize,
                  imgSrc,
                  videoEndTime,
                  videoStartTime,
                  videoVolume,
                  zIndex
                } = this.props;
  
                const imageOptions = {
                  disableParallax,
                  elementInViewport,
                  imgElement,
                  imgPosition,
                  imgRepeat,
                  imgSize,
                  imgSrc,
                  zIndex
                };
  
                const videoOptions = {
                  disableVideo,
                  videoEndTime,
                  videoLazyLoading: !disableVideoLazyLoading,
                  videoLoop: !disableVideoLoop,
                  videoPlayOnlyVisible: !disableVideoPlayOnlyVisible,
                  videoStartTime,
                  videoVolume
                };
  
                jarallax(
                  this.jarallax.current,
                  image
                    ? imageOptions
                    : video
                    ? videoOptions
                    : element
                    ? elementOptions
                    : null
                );
  
                jarallaxVideo(this.jarallax.current);
                jarallaxElement(this.jarallax.current);
              }
  
              componentWillUnmount() {
                jarallax(this.jarallax.current, 'destroy');
              }
  
              render() {
                const {
                  alt,
                  children,
                  className,
                  element,
                  image,
                  keepImg,
                  speed,
                  tag: Tag,
                  threshold,
                  type,
                  video,
                  height,
                  width,
                  ...attributes
                } = this.props;
  
                return (
                  <MDBParallax
                    alt={alt}
                    className={className}
                    element={element}
                    height={height}
                    image={image}
                    keepImg={keepImg}
                    ref={this.jarallax}
                    speed={speed}
                    tag={Tag}
                    threshold={threshold}
                    type={type}
                    video={video}
                    width={width}
                    {...attributes}
                  >
                    {children}
                  </MDBParallax>
                );
              }
            }
  
            MDBParallaxWrapper.propTypes = {
              alt: PropTypes.string.isRequired,
              className: PropTypes.string,
              disableParallax: PropTypes.func,
              disableVideo: PropTypes.func,
              elementInViewport: PropTypes.node,
              height: PropTypes.string,
              image: PropTypes.string,
              imgElement: PropTypes.string,
              imgPosition: PropTypes.string,
              imgRepeat: PropTypes.string,
              imgSize: PropTypes.string,
              keepImg: PropTypes.bool,
              speed: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
              tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
              threshold: PropTypes.node,
              type: PropTypes.string,
              video: PropTypes.string,
              videoEndTime: PropTypes.number,
              videoLazyLoading: PropTypes.bool,
              videoLoop: PropTypes.bool,
              videoPlayOnlyVisible: PropTypes.bool,
              videoStartTime: PropTypes.number,
              videoVolume: PropTypes.number,
              width: PropTypes.string,
              zIndex: PropTypes.number
            };
  
            MDBParallaxWrapper.defaultProps = {
              alt: 'MDBParallax image',
              disableParallax: null,
              disableVideo: null,
              elementInViewport: null,
              height: '600px',
              imgElement: '.jarallax-img',
              imgPosition: '50% 50%',
              imgRepeat: 'no-repeat',
              imgSize: 'cover',
              keepImg: false,
              speed: 0.5,
              tag: 'div',
              threshold: 'null null',
              type: 'scroll',
              videoEndTime: 0,
              videoLazyLoading: true,
              videoLoop: true,
              videoPlayOnlyVisible: true,
              videoStartTime: 0,
              videoVolume: 0,
              width: '100%',
              zIndex: -100
            };
  
            export default MDBParallaxWrapper;

ParallaxWrapper import.

Please import MDBParallaxWrapper component to file where you want to use MDBParallax.

        
            
              import MDBParallaxWrapper from './MDBParallaxWrapper';

Basic structure 

        
            
  
              import React, { Component } from 'react';
              import MDBParallaxWrapper from './MDBParallaxWrapper';
  
              class Parallax extends Component {
                render() {
                  return (
                    <>
                      <div style={{ height: '60vh' }}></div>
                        <MDBParallaxWrapper
                          image='https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.webp'
                          speed='0.8'
                        />
                      <div style={{ height: '60vh' }}></div>
                    </>
                  );
                }
              }
  
              export default Parallax;

Different types of parallax effects.

You can use one of 5 different parallax effects including : scroll, scale, opacity, scroll-opacity, scale-opacity 

        
            
            import React, { Component } from 'react';
            import MDBParallaxWrapper from './MDBParallaxWrapper';
  
            class Parallax extends Component {
              render() {
                return (
                  <>
                    <div className='container'>
                      <div className='row'>
                        <div className='col-md-12 text-center'>
                          <h2 className='h1 font-weight-bold my-5 py-4'>
                            Different MDBParallax effects
                          </h2>
                        </div>
                      </div>
                    </div>
  
                    <MDBParallaxWrapper
                      image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(19).webp'
                      speed={0.5}
                      height='50vh'
                      type='scale'
                    />
                    <MDBParallaxWrapper
                      image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(18).webp'
                      speed={2}
                      height='50vh'
                      type='opacity'
                    />
                    <MDBParallaxWrapper
                      image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(20).webp'
                      speed={0.2}
                      height='50vh'
                      type='scroll-opacity'
                    />
                    <MDBParallaxWrapper
                      image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(57).webp'
                      speed={0.2}
                      height='50vh'
                      type='scale-opacity'
                    />
                  </>
                );
              }
            }
  
            export default Parallax;

Parallax with video props.

Background Video Usage Example. For local videos required only 1 video type, not necessary use all mp4, webm and ogv. This need only for maximum compatibility with all browsers.

        
            
              import React, { Component } from 'react';
              import MDBParallaxWrapper from './MDBParallaxWrapper';
  
              class Parallax extends Component {
                render() {
                  return (
                    <>
                      <div className='container'>
                        <div className='row my-5 py-4'>
                          <div className='col-md-12 text-center'>
                            <MDBParallax
                              image='https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.webp'
                              speed='0.8'
                            />
                            <p align='justify'>
                              Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis
                              commodi porro, cumque provident rem corporis odit, ut quas
                              dolores maxime nesciunt possimus quis, soluta velit debitis
                              amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit
                              amet, consectetur quis elit. Perspiciatis commodi porro, cumque
                              provident rem corporis odit, ut quas dolores maxime nesciunt
                              possimus quis, soluta velit debitis amet, veritatis cupiditate
                              reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                              Perspiciatis commodi porro, cumque provident rem corporis odit,
                              ut quas dolores maxime nesciunt possimus quis, soluta velit
                              debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                              dolor sit amet, consectetur quis elit. Perspiciatis commodi
                              porro, cumque provident rem corporis odit, ut quas dolores
                              maxime nesciunt possimus quis, soluta velit debitis amet,
                              veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                              consectetur quis elit. Perspiciatis commodi porro, cumque
                              provident rem corporis odit, ut quas dolores maxime nesciunt
                              possimus quis, soluta velit debitis amet, veritatis cupiditate
                              reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                              Perspiciatis commodi porro, cumque provident rem corporis odit,
                              ut quas dolores maxime nesciunt possimus quis, soluta velit
                              debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                              dolor sit amet, consectetur quis elit. Perspiciatis commodi
                              porro, cumque provident rem corporis odit, ut quas dolores
                              maxime nesciunt possimus quis, soluta velit debitis amet,
                              veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                              consectetur quis elit. Perspiciatis commodi porro, cumque
                              provident rem corporis odit, ut quas dolores maxime.
                            </p>
                          </div>
                        </div>
                      </div>
                      <MDBParallaxWrapper
                        video='https://player.vimeo.com/video/137857207'
                        type='scroll-opacity'
                        speed='0.1'
                        disableVideoLazyLoading
                      />
                      <MDBParallaxWrapper
                        className='jarallax'
                        video='https://youtu.be/lugard7P0nw'
                        disableVideoLazyLoading
                      />
                      <div className='container'>
                        <div className='row my-5 py-4'>
                          <div className='col-md-12 text-center'>
                            <p align='justify'>
                              Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis
                              commodi porro, cumque provident rem corporis odit, ut quas
                              dolores maxime nesciunt possimus quis, soluta velit debitis
                              amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit
                              amet, consectetur quis elit. Perspiciatis commodi porro, cumque
                              provident rem corporis odit, ut quas dolores maxime nesciunt
                              possimus quis, soluta velit debitis amet, veritatis cupiditate
                              reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                              Perspiciatis commodi porro, cumque provident rem corporis odit,
                              ut quas dolores maxime nesciunt possimus quis, soluta velit
                              debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                              dolor sit amet, consectetur quis elit. Perspiciatis commodi
                              porro, cumque provident rem corporis odit, ut quas dolores
                              maxime nesciunt possimus quis, soluta velit debitis amet,
                              veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                              consectetur quis elit. Perspiciatis commodi porro, cumque
                              provident rem corporis odit, ut quas dolores maxime nesciunt
                              possimus quis, soluta velit debitis amet, veritatis cupiditate
                              reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                              Perspiciatis commodi porro, cumque provident rem corporis odit,
                              ut quas dolores maxime nesciunt possimus quis, soluta velit
                              debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                              dolor sit amet, consectetur quis elit. Perspiciatis commodi
                              porro, cumque provident rem corporis odit, ut quas dolores
                              maxime nesciunt possimus quis, soluta velit debitis amet,
                              veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                              consectetur quis elit. Perspiciatis commodi porro, cumque
                              provident rem corporis odit, ut quas dolores maxime.
                            </p>
                            <div style={{ height: '60vh' }}></div>
                          </div>
                        </div>
                      </div>
                    </>
                  );
                }
              }
  
              export default Parallax;

Any Element Parallax Usage Example

element props allows you to use parallax component in any type of element.

Note: this is more like experimental feature, so the behavior could be changed in the future releases. 

        
            
  
                import React, { Component } from 'react';
                import MDBParallaxWrapper from './MDBParallaxWrapper';
  
                class Parallax extends Component {
                  render() {
                    return (
                      <>
                        <div className='container'>
                          <div className='row my-5 py-4'>
                            <div className='col-md-12 text-center'>
                              <p align='justify'>
                                Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis
                                commodi porro, cumque provident rem corporis odit, ut quas
                                dolores maxime nesciunt possimus quis, soluta velit debitis
                                amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit
                                amet, consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime.
                              </p>
                              <p className='mb-0' align='justify'>
                                Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis
                                commodi porro, cumque provident rem corporis odit, ut quas
                                dolores maxime nesciunt possimus quis, soluta velit debitis
                                amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit
                                amet, consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime.
                              </p>
                            </div>
                          </div>
                        </div>
  
                        <div className='container'>
                          <div className='row'>
                            <div className='col-md-12 text-center overflow-hidden'>
                              <h2 className='h1 font-weight-bold cyan-text my-5 py-4'>
                                <MDBParallaxWrapper tag='span' speed='0' element>
                                  P
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='80' element>
                                  a
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='-30' element>
                                  r
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='180' element>
                                  a
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='-50' element>
                                  l
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='120' element>
                                  l
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='-25' element>
                                  a
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='60' element>
                                  x
                                </MDBParallaxWrapper>
                                &nbsp;
                                <MDBParallaxWrapper tag='span' speed='-50' element>
                                  E
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='110' element>
                                  l
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='-160' element>
                                  e
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='60' element>
                                  m
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='-240' element>
                                  e
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='30' element>
                                  n
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='-170' element>
                                  t
                                </MDBParallaxWrapper>
                                <MDBParallaxWrapper tag='span' speed='0' element>
                                  s
                                </MDBParallaxWrapper>
                              </h2>
                            </div>
                          </div>
                        </div>
  
                        <div className='container'>
                          <div className='row my-5 py-4'>
                            <div className='col-md-12 text-center'>
                              <p align='justify'>
                                Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis
                                commodi porro, cumque provident rem corporis odit, ut quas
                                dolores maxime nesciunt possimus quis, soluta velit debitis
                                amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit
                                amet, consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime.
                              </p>
                              <p className='mb-0' align='justify'>
                                Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis
                                commodi porro, cumque provident rem corporis odit, ut quas
                                dolores maxime nesciunt possimus quis, soluta velit debitis
                                amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit
                                amet, consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime nesciunt
                                possimus quis, soluta velit debitis amet, veritatis cupiditate
                                reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit.
                                Perspiciatis commodi porro, cumque provident rem corporis odit,
                                ut quas dolores maxime nesciunt possimus quis, soluta velit
                                debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum
                                dolor sit amet, consectetur quis elit. Perspiciatis commodi
                                porro, cumque provident rem corporis odit, ut quas dolores
                                maxime nesciunt possimus quis, soluta velit debitis amet,
                                veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet,
                                consectetur quis elit. Perspiciatis commodi porro, cumque
                                provident rem corporis odit, ut quas dolores maxime.
                              </p>
                            </div>
                          </div>
                        </div>
                      </>
                    );
                  }
                }
  
                export default Parallax;

React Parallax - API

In this section you will find advanced information about the Parallax component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
          import { MDBParallax } from 'mdbreact';

API Reference: Parallax properties

The table below shows the configuration options of the MDBParallax component.

Name Type Default Description Example
alt String 'MDBParallax image' Required props - set image alt <MDBParallax alt='MDB Parallax Image' />
className String Adds custom classes <MDBParallax className="customClass" />
height String 600px Changes height of parallax container <MDBParallax height="100vh" />
image String Set url of Parallax image and. One of required props. <MDBParallax image='http://yourLink.com/img' />
imgElement String .jarallax-img Image tag that will be used as background. <MDBParallax imgElement='.your-selector' />
imgPosition String 50% 50% Image position inside of container. <MDBParallax imgPosition='100px 100px' />
imgRepeat String no-repeat Image repeat. Supported only object-position values. <MDBParallax imgRepeat='repeat' />
imgSize String cover Image coverage of container. <MDBParallax imgSize='contain' />
keepImg Boolean false Keep paralax element in it's default place after Jarallax inited. <MDBParallax keepImg={true} />
speed mixed (string / number) 0.5 Parallax effect speed. Provide numbers from -1.0 to 2.0. <MDBParallax speed='1.1' />
tag String div Set tag of parallax container <MDBParallax tag='span' />
threshold mixed (string / number) null null Specify threshold for the parallax effect to kick in. For example, if you pass 0 0, the element will start to move only after it has been scrolled to the middle of the viewport. <MDBParallax threshold='0 0' />
type String scroll Sets parallax effect. You can use one of five types: scroll, scale, opacity, scroll-opacity, scale-opacity. <MDBParallax type='scroll-opacity' />
videoEndTime Number 0 End time in seconds when video will be ended. <MDBParallax videoEndTime={0} />
disableVideoLazyLoading Boolean false Preload videos only when it is visible on the screen. <MDBParallax disableVideoLazyLoading />
disableVideoLoop Boolean false Loop video to play infinitely. <MDBParallax disableVideoLoop />
disableVideoPlayOnlyVisible Boolean false Play video only when it is visible on the screen. <MDBParallax disableVideoPlayOnlyVisible />
video String You can use Youtube, Vimeo or local videos. <MDBParallax video='https://player.vimeo.com/video/137857207' />
videoStartTime Number 0 Start time in seconds when video will be started (this value will be applied also after loop). <MDBParallax videoStartTime={0} />
videoVolume Number 0 Video volume from 0 to 100. <MDBParallax videoVolume='100' />
width String 100% Sets width of parallax container. Required when use keepImg props <MDBParallax width='200px' />
zIndex Number -100 z-index of parallax container. <MDBParallax zIndex={20} />