web
mobile

Parallax

Bootstrap Parallax

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

Live demo

Basic structure MDB Pro component

HTML construction



        <!-- 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 to load the picture in parallax.



        <!-- 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 to call the parallax plugin.

Data attribute method



        <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 the available options as data attributes. For example: data-speed, data-img-src, data-img-size, etc...

JavaScript method



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

      

jQuery method



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

      

Background Video Usage Examples

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



        <!-- 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:

Local videos may require only one video type, not necessarily the use of all of mp4, webm and ogv. This is only for maximum compatibility with all browsers.


Options

Options can be passed in data attributes or in an object when you initialize jarallax from the 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 use an image from the background.
imgElement dom / selector .jarallax-img Image tag that will be used as the background.
imgSize string cover Image size. If you use the <img> tag for background, you should add object-fit values, else use the background-size values.
imgPosition string 50% 50% Image position. If you use the <img> tag for background, you should add object-position values, else use the background-position values.
imgRepeat string no-repeat Image repeat. Supports only background-position values.
keepImg boolean false Keep the <img> tag in it's default place after Jarallax inited.
elementInViewport dom null Use a custom DOM / jQuery element to check if there is a parallax block in viewport. More info here - Issue 13.
zIndex number -100 z-index of the parallax container.
disableParallax RegExp / function - Disable parallax on specific user agents (using regular expression) or with a function return value. The image will be set on the background.
disableVideo RegExp / function - Disable video loading on specific user agents (using regular expression) or with a function return value. The image will be set on the background.
automaticResize boolean false Experimental! Automatically recalculates parallax size and position when the size of parallax block changes (dynamic content inside). Uses ResizeObserver, which has a small browsers compatible. Recommended to use with polyfill https://github.com/que-etc/resize-observer-polyfill.

Disable on mobile devices

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

Example:



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

      

Or by using a function. Example:



        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 the data attribute data-jarallax-video.
videoStartTime float 0 Start time in seconds when the video will be started (this value will be applied also after the loop).
videoEndTime float 0 End time in seconds when the video will be ended.
videoVolume float 0 Video volume from 0 to 100.
videoPlayOnlyVisible boolean true Play a video only when it is visible on the screen.

Getting started: download & setup


Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

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
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now