web
mobile
Edit these docs Rate these docs

React ParallaxMDB Pro component

React Parallax - Bootstrap 4 & Material Design

Overview


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


Basic structure



          import React, { Component } from 'react';
          import { MDBParallax } from 'mdbreact';

          class Parallax extends Component {
            render() {
              return (
                <>
                  <div style={{ height: '60vh' }}></div>
                  <MDBParallax
                    image='https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg'
                    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 { MDBParallax } from 'mdbreact';

          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>

            <MDBParallax
              image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(19).jpg'
              speed={0.5}
              height='50vh'
              type='scale'
            />
            <MDBParallax
              image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(18).jpg'
              speed={2}
              height='50vh'
              type='opacity'
            />
            <MDBParallax
              image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(20).jpg'
              speed={0.2}
              height='50vh'
              type='scroll-opacity'
            />
            <MDBParallax
              image='https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(57).jpg'
              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 { MDBParallax } from 'mdbreact';

          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.jpg'
                          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>
                  <MDBParallax
                    video='https://player.vimeo.com/video/137857207'
                    type='scroll-opacity'
                    speed='0.1'
                    disableVideoLazyLoading
                  />
                  <MDBParallax
                    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 { MDBParallax } from 'mdbreact';

            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'>
                            <MDBParallax tag='span' speed='0' element>
                              P
                            </MDBParallax>
                            <MDBParallax tag='span' speed='80' element>
                              a
                            </MDBParallax>
                            <MDBParallax tag='span' speed='-30' element>
                              r
                            </MDBParallax>
                            <MDBParallax tag='span' speed='180' element>
                              a
                            </MDBParallax>
                            <MDBParallax tag='span' speed='-50' element>
                              l
                            </MDBParallax>
                            <MDBParallax tag='span' speed='120' element>
                              l
                            </MDBParallax>
                            <MDBParallax tag='span' speed='-25' element>
                              a
                            </MDBParallax>
                            <MDBParallax tag='span' speed='60' element>
                              x
                            </MDBParallax>
                            &nbsp;
                            <MDBParallax tag='span' speed='-50' element>
                              E
                            </MDBParallax>
                            <MDBParallax tag='span' speed='110' element>
                              l
                            </MDBParallax>
                            <MDBParallax tag='span' speed='-160' element>
                              e
                            </MDBParallax>
                            <MDBParallax tag='span' speed='60' element>
                              m
                            </MDBParallax>
                            <MDBParallax tag='span' speed='-240' element>
                              e
                            </MDBParallax>
                            <MDBParallax tag='span' speed='30' element>
                              n
                            </MDBParallax>
                            <MDBParallax tag='span' speed='-170' element>
                              t
                            </MDBParallax>
                            <MDBParallax tag='span' speed='0' element>
                              s
                            </MDBParallax>
                          </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;


        
Edit these docs Rate these docs

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} />