Parallax

Angular Bootstrap 5 Parallax plugin

Parallax is a plugin that adds scrolling effect animation for your images.

Responsive Parallax plugin built with the latest Bootstrap 5. Many customization examples of scrolling effect images animation like scroll delay, scroll direction.

Note: Read the API tab to find all available options and advanced customization

Basic example

Use mdb-parallax selector to render parallax image, and provide path to your image with [imageSrc] input 

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp'"></mdb-parallax>

Direction

Change parallax scroll direction with [direction] input 

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp'" [direction]="'right'"></mdb-parallax>

Combine horizontal and vertical directions

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp'" [direction]="'right up'"></mdb-parallax>

Delay

Change delay of the scroll with [delay] input

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [delay]="2"></mdb-parallax>

Scale

Change scale of the image with [scale] input

        
            
           <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [scale]="1.8"></mdb-parallax>

Scroll transition

Change default scroll transition timing function with [transition] input 

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [transition]="'linear'"></mdb-parallax>

Max transition

Change maximum scroll value of the image with [maxTransiton] input. Give values within 0-100 range 

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [maxTransition]="60"></mdb-parallax>

Max image height

Set maximal parallax container height with [maxHeight] input

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [maxHeight]="400"></mdb-parallax>

Image alignment

Horizontal and vertical alignment of the image is set to center by default. Change horizontal alignment with [horizontalAlignment] and vertical with [verticalAlignment] (vertical alignment will only work with [maxHeight] set)

Image horizontally aligned

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [horizontalAlignment]="'left'"></mdb-parallax>

Image vertically aligned

        
            
            <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [verticalAlignment]="'center'" [maxHeight]="500"></mdb-parallax>

Container overflow

Make parallax overflow its container with [overflow] input

        
            
          <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'" [overflow]="true" [direction]="'right'"></mdb-parallax>

Parallax with content

Place any content inside the parallax by adding div with class parallax-content and your content inside parallax container

Parallax content

Some quick example text to show you possibilites of the parallax element. 

        
            
        <mdb-parallax [imageSrc]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'">
          <div class="container d-flex justify-content-center align-items-center" style="height: 100%">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to show you possibilites of the parallax element.
                </p>
                <button type="button" class="btn btn-primary">Button</button>
              </div>
            </div>
          </div>
      </mdb-parallax>

Parallax - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/parallax

Import

Edit in sandbox 
        
            
        import { MdbParallaxModule } from 'mdb-angular-parallax';
        …
        @NgModule ({
          ...
          imports: [MdbParallaxModule],
          ...
        })
        
        
    
        
            
        @import 'mdb-angular-parallax/scss/parallax.scss';

Inputs

Name Type Default Description
imageSrc String ' Sets image source for parallax component. Obligatory to instantiate the component.
direction String 'up' Sets direction in which the image will be translated when scrolling down the page. Possible settings: up | right | down | left | up left | up right | down left | left right.
delay Number 0.4 Sets the time in seconds in which translation of the image will still be going after the user stops scrolling.
scale Number 1.3 Sets scale of the image. The higher the scale is set, the bigger parallax scroll effect will be visible, but the image will lose in quality. To keep the image quality choose higher resolution images or limit the height of the parallax container with [maxHeight] input.
transition String 'cubic-bezier(0,0,0,1)' Sets transition timing function for parallax scroll efect. Can receive timing functions such 'ease', 'linear', 'cubic-bezier'.
maxTransition Number 0 When [maxTransition] is set, parallax animation will stop after given percentage of user viewport is scrolled.
maxHeight Number 0 Sets maximal height of the parallax container.
horizontalAlignment String 'center' Determines which horizontal part of the image will be more visible during the parallax effect. Possible settings: right | left | center
verticalAlignment String 'center' Determines which vertical part of the image will be more visible during the parallax effect. Works only when [maxHeight] is set. Possible settings: top | bottom | center
overflow Boolean false When set to true, the parallax image will translate out of its container and will overlap content on the page.