Parallax

These modular elements can be readily used and customized in every layout across pages.

For more details see Rellax documentation⟶

Add the attribute data-parallax and data-rellax-speed to make a parallax object. data-rellax-speed can be positive or negative number.

<h1 data-parallax data-rellax-speed="-20">Parallax</h1>

JavaScript

<script src="vendors/rellax/rellax.min.js"></script>

Image Background Parallax

<div class="position-relative py-6 py-lg-8 overflow-hidden">
  <div class="bg-holder overlay overlay-2 vh-50" style="background-image:url(../../assets/img/gallery/03-f.jpg);" data-parallax="" data-rellax-percentage="0.5" data-rellax-speed="-3">
  </div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h5 class="text-white">Image Background Parallax</h5>
  </div>
</div>