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
Basic example
To initialize Parallax effect simply use MDBParallax and provide imgSrc property with path to your image
Direction
Change parallax scroll direction with direction property
Combine horizontal and vertical directions
Delay
Change delay of the scroll with delay property
Scale
Change scale of the image with scale property
Scroll transition
Change default scroll transition timing function with transition property
Max transition
Change maximum scroll value of the image with maxTransition property. Give values within 0-100 range
Max image height
Set maximal parallax container height with maxHeight property
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
Image vertically aligned
Container overflow
Make parallax overflow its container with overflow< property
Parallax with content
Place any content inside the parallax by adding it as children of MDBParallax
Parallax content
Some quick example text to show you possibilites of the parallax element.