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

Show code

HTML

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

Direction

Change parallax scroll direction with [direction] input

Show code

HTML

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

Combine horizontal and vertical directions

Show code

HTML

<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

Show code

HTML

<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

Show code

HTML

<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

Show code

HTML

<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

Show code

HTML

<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

Show code

HTML

<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

Show code

HTML

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

Image vertically aligned

Show code

HTML

<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

Show code

HTML

<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.

Show code

HTML

<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.

Terminal

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

Import

Show code Edit in sandbox

app.module.ts

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

styles.scss

@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.