Edit these docs Rate these docs

Angular Bootstrap Parallax

Angular Parallax - Bootstrap 4 & Material Design

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

Live demo

Required external library

Using this functionality requires the installation of an external library - jarallax. Install it with the following command, then configure it as follows:

  • Import the required files into an angular.json file,
  • Add the polyfill to the polyfills.ts file,
  • In the component in which you use Parallax effect add its initialization.


    "styles": [
    ...
    "node_modules/jarallax/dist/jarallax.css",
    ...
    ],
    "scripts": [
    ...
    "node_modules/jarallax/dist/jarallax.min.js",
    "node_modules/jarallax/dist/jarallax-element.min.js",
    "node_modules/jarallax/dist/jarallax-video.min.js"
    ...
    ]
  

    (window as any).global = window; // add this line at the top of the polyfills.ts file
  

    import {AfterViewInit, Component} from '@angular/core';
    import 'jarallax';
    declare var jarallax: any;
    @Component({
    selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
    })
    export class AppComponent implements AfterViewInit {

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

  

Basic example MDB Pro component


      <div class="view intro jarallax"
           style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-attachment: fixed; height: 1200px;">
        <div class="full-bg-img mask rgba-white-light">
          <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 1200px">
              <div class="row mt-5">
                <div class="col-md-12 wow fadeIn mb-3">
                  <div class="intro-info-content text-center">
                    <h2 class="h1 display-1 mb-2 wow fadeInDown" data-wow-delay="0.3s">CARLA <a
                      class="indigo-text font-bold">SMITH</a>
                    </h2>
                    <h5 class="font-up mb-3 mt-1 font-bold wow fadeIn" data-wow-delay="0.4s">Web developer & graphic
                      designer</h5>
                    <a mdbBtn color="light-blue" size="lg" class="wow fadeIn waves-light" mdbWavesEffect
                       data-wow-delay="0.4s">portfolio</a>
                    <a mdbBtn color="indigo" size="lg" class="wow fadeIn waves-light" mdbWavesEffect
                       data-wow-delay="0.4s">About
                      me</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <!--Grid row-->
        <div class="row">
          <!--Grid column-->
          <div class="col-md-12 text-center mb-5">
            <h2 class="h1 font-bold light-blue-text my-5">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 intro jarallax" style="background-image: none; z-index: 0; min-height: 700px;">
        <div class="full-bg-img mask rgba-white-light">
          <div class="container flex-center">
            <div class="row mt-5 py-5">
              <div class="col-md-12 wow fadeIn mb-3" style="animation-name: none; visibility: visible;">
                <div class="text-center">
                  <h2 class="h1 display-2 mb-2 wow fadeInDown" data-wow-delay="0.3s">ANNA'S <a
                    class="white-text font-bold">BLOG</a>
                  </h2>
                  <h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">Interior designer &
                    Nature
                    lover</h5>
                  <a mdbBtn color="elegant" size="lg" class="wow fadeInDown waves-effect waves-light" mdbWavesEffect
                     data-wow-delay="0.4s">portfolio</a>
                  <a mdbBtn color="white" outline="true" size="lg" class="wow fadeInDown waves-effect waves-light"
                     mdbWavesEffect data-wow-delay="0.4s">About me</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <!--Grid row-->
        <div class="row">
          <!--Grid column-->
          <div class="col-md-12 text-center my-5">
            <h2 class="h1 font-bold grey-text mb-5">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 intro jarallax"
           style="background-image: url(https://mdbootstrap.com/img/Photos/Others/food2.jpg); background-attachment: fixed; background-size: cover; min-height: 700px">
        <div class="full-bg-img mask rgba-pink-slight">
        </div>
      </div>

      <div class="view intro jarallax"
           style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg); background-attachment: fixed; min-height: 700px">
        <div class="full-bg-img mask rgba-purple-slight">
          <div class="container">
            <div class="d-flex align-items-center d-flex justify-content-center" style="height: 700px">
              <div class="row mt-5">
                <div class="col-md-12 wow fadeIn mb-3">
                  <div class="intro-info-content text-center">
                    <h2 class="h1 display-1 white-text mb-2 wow fadeInDown" data-wow-delay="0.3s">Welcome on my
                      page!</h2>
                    <h4 class="mb-3 mt-1 white-text font-bold wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit
                      amet</h4>
                    <a mdbBtn color="pink" class="wow fadeIn waves-light" mdbWavesEffect data-wow-delay="0.4s">Read
                      more</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <!--Grid row-->
        <div class="row">
          <!--Grid column-->
          <div class="col-md-12 text-center my-5">
            <h2 class="h1 font-bold pink-text mb-5">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>

    

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download