Parallax
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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
To initialize Parallax effect simply add data-mdb-parallax-init
attribute to any element and
provide data-mdb-image-src
attribute with path to your image.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp" ></div>
Direction
Change parallax scroll direction with data-mdb-direction
attribute.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-direction="right"></div>
Combine horizontal and vertical directions.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-direction="up right"></div>
Delay
Change delay of the scroll with data-mdb-delay
attribute.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-delay="2"></div>
Scale
Change scale of the image with data-mdb-scale
attribute.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-scale="1.8"></div>
Scroll transition
Change default scroll transition timing function with data-mdb-transition
attribute.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-transition="linear"></div>
Max transition
Change maximum scroll value of the image with data-mdb-max-transition
attribute.
Provide value within the 0-100 range.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-max-transition="60"></div>
Max image height
Set maximal parallax container height with data-mdb-max-height
attribute.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-max-height="400"></div>
Image alignment
Horizontal and vertical alignment of the image is set to center by default. Change horizontal
alignment with data-mdb-horizontal-alignment
and vertical with
data-mdb-vertical-alignment
(vertical alignment will only work with
data-mdb-max-height
set).
Image horizontally aligned.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp" data-mdb-horizontal-alignment="left"></div>
Image vertically aligned.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
data-mdb-max-height="500" data-mdb-vertical-alignment="top"></div>
Container overflow
Make parallax overflow its container with data-mdb-overflow
attribute.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" data-mdb-overflow="true" data-mdb-direction="right"></div>
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 possibilities of the parallax element.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp">
<div class="parallax-content" >
<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 possibilities of the parallax element.
</p>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
</div>
</div>
</div>
</div>
</div>
Parallax - API
Import
import Parallax from 'mdb-parallax';
@import '~mdb-parallax/css/parallax.min.css';
Usage
Via data attributes
Using the Parallax plugin doesn't require any additional JavaScript code - simply add
data-mdb-parallax-init
attribute to
any element
and use other data attributes to set all options.
<div data-mdb-parallax-init data-mdb-image-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"></div>
Via JavaScript
<div id="parallax" data-mdb-image-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"></div>
const parallaxExample = document.getElementById('parallax');
new Parallax(parallaxExample)
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-image-src=""
.
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
data-mdb-max-height attribute.
|
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 data-mdb-max-transition 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 data-mdb-max-height 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. |
Methods
Name | Parameters | Description | Example |
---|---|---|---|
dispose
|
Removes the Parallax instance. |
instance.dispose()
|
|
getInstance
|
element | Static method which allows to get the parallax instance associated with a DOM element. |
Parallax.getInstance(element)
|
init
|
element | Static method which allows to create Parallax instance from element dynamically added to DOM |
Parallax.init(element)
|
const parallaxElement = document.getElementById('my-parallax-container');
const instance = Parallax.getInstance(parallaxElement);
instance.dispose();