Parallax

Bootstrap Parallax

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

Live demo

Basic structure MDB Pro component

HTML construction

HTML
JavaScript



        <!-- Main layout -->
        <main>

          <div class="view jarallax" style="height: 100vh;">
            <img class="jarallax-img" src="https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg" alt="">
            <div class="mask rgba-blue-slight">
              <div class="container flex-center text-center">
                <div class="row mt-5">
                  <div class="col-md-12 wow fadeIn mb-3">
                    <h1 class="display-3 mb-2 wow fadeInDown" data-wow-delay="0.3s">NATALIE <a class="indigo-text font-weight-bold">SMITH</a></h1>
                    <h5 class="text-uppercase mb-3 mt-1 font-weight-bold wow fadeIn" data-wow-delay="0.4s">Web developer & graphic designer</h5>
                    <a class="btn btn-light-blue btn-lg wow fadeIn" data-wow-delay="0.4s">portfolio</a> <a class="btn btn-indigo btn-lg wow fadeIn" data-wow-delay="0.4s">About me</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="container">

            <!--Grid row-->
            <div class="row mb-5 pb-4">

              <!--Grid column-->
              <div class="col-md-12 text-center">

                <h2 class="h1 font-weight-bold light-blue-text my-5 py-4">Lorem ipsum dolor sit amet, consectetur quis elit.</h2>
                <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 nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>

              </div>
              <!--Grid column-->

            </div>
            <!--Grid row-->

          </div>

          <div class="view jarallax">
            <img class="jarallax-img" src="https://mdbootstrap.com/img/Photos/Others/nature4.jpg" alt="">
          </div>

        </main>
        <!-- Main layout -->



        // object-fit polyfill run
        objectFitImages();

        /* init Jarallax */
        jarallax(document.querySelectorAll('.jarallax'));

        jarallax(document.querySelectorAll('.jarallax-keep-img'), {
            keepImg: true,
        });

Background Picture Usage Examples

You have 3 options of loading the picture in parallax.

HTML



        <!-- Background Image Parallax -->
        <div class="jarallax">
          <img class="jarallax-img" src="<background_image_url_here>" alt="">
          Your content here...
        </div>

        <!-- Background Image Parallax with <picture> tag -->
        <div class="jarallax">
          <picture class="jarallax-img">
            <source media="..." srcset="<alternative_background_image_url_here>">
            <img src="<background_image_url_here>" alt="">
          </picture>
          Your content here...
        </div>

        <!-- Alternate: Background Image Parallax -->
        <div class="jarallax" style="background-image: url('<background_image_url_here>');">
          Your content here...
        </div>

Call the plugin

You have 3 options of calling the parallax plugin.

Data attribute way

HTML



        <div data-jarallax data-speed="0.2" class="jarallax">
          <img class="jarallax-img" src="<background_image_url_here>" alt="">
          Your content here...
        </div>

Note: You can use all available options as data attributes. For example: data-speed, data-img-src, data-img-size, etc...

JavaScript way

JavaScript



        jarallax(document.querySelectorAll('.jarallax'), {
            speed: 0.2
        });

jQuery way

JavaScript



        $('.jarallax').jarallax({
          speed: 0.2
        });

Background Video Usage Examples

You also have 3 options of loading the video in parallax.

HTML



        <!-- Background YouTube Parallax -->
        <div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
          Your content here...
        </div>

        <!-- Background Vimeo Parallax -->
        <div class="jarallax" data-jarallax-video="https://vimeo.com/110138539">
          Your content here...
        </div>

        <!-- Background Local Video Parallax -->
        <div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
          Your content here...
        </div>

Note:

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.

Options

Options can be passed in data attributes or in object when you initialize jarallax from script.

Name	Type	Default	Description
type	string	`scroll`	scroll, scale, opacity, scroll-opacity, scale-opacity.
speed	float	`0.5`	Parallax effect speed. Provide numbers from -1.0 to 2.0.
imgSrc	path	`null`	Image url. By default used image from background.
imgElement	dom / selector	`.jarallax-img`	Image tag that will be used as background.
imgSize	string	`cover`	Image size. If you use `<img>` tag for background, you should add `object-fit` values, else use `background-size` values.
imgPosition	string	`50% 50%`	Image position. If you use `<img>` tag for background, you should add `object-position` values, else use `background-position` values.
imgRepeat	string	`no-repeat`	Image repeat. Supported only `background-position` values.
keepImg	boolean	`false`	Keep `<img>` tag in it's default place after Jarallax inited.
elementInViewport	dom	`null`	Use custom DOM / jQuery element to check if parallax block in viewport. More info here - Issue 13.
zIndex	number	`-100`	z-index of parallax container.
disableParallax	RegExp / function	-	Disable parallax on specific user agents (using regular expression) or with function return value. The image will be set on the background.
disableVideo	RegExp / function	-	Disable video load on specific user agents (using regular expression) or with function return value. The image will be set on the background.
automaticResize	boolean	false	Experimental! Automatically recalculate parallax size and position when the size of parallax block changed (dynamic content inside). Uses ResizeObserver, which has a small browsers compatible. Recommended using with polyfill https://github.com/que-etc/resize-observer-polyfill.

Disable on mobile devices

You can disable parallax effect and/or video background on mobile devices using option disableParallax and/or disableVideo.

Example:

JavaScript



        jarallax(document.querySelectorAll('.jarallax'), {
          disableParallax: /iPad|iPhone|iPod|Android/,
          disableVideo: /iPad|iPhone|iPod|Android/
        });

Or using function. Example:

JavaScript



        jarallax(document.querySelectorAll('.jarallax'), {
          disableParallax: function () {
            return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
          },
          disableVideo: function () {
            return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
          }
        });

Options For Video (+ supported all default options)

Options can be passed in data attributes or in object when you initialize jarallax from script.

Name	Type	Default	Description
videoSrc	string	`null`	You can use Youtube, Vimeo or local videos. Also you can use data attribute `data-jarallax-video`.
videoStartTime	float	`0`	Start time in seconds when video will be started (this value will be applied also after loop).
videoEndTime	float	`0`	End time in seconds when video will be ended.
videoVolume	float	`0`	Video volume from 0 to 100.
videoPlayOnlyVisible	boolean	`true`	Play video only when it is visible on the screen.

Getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue