پارالکس

<!-- Background image parallax -->
<div class="jarallax bg-dark py-5" data-jarallax data-speed="0.5">
  <span class="img-overlay"></span>
  <div class="jarallax-img" style="background-image: url(path-to-background-image);"></div>
  <div class="container content-overlay text-center my-md-4 py-sm-5">
    <h2 class="h1 text-light py-lg-5 my-5">Parallax backgound image</h2>
  </div>
</div>

// Background image parallax
.jarallax.bg-dark.py-5(data-jarallax data-speed="0.5")
  span.img-overlay
  .jarallax-img(style="background-image: url(path-to-background-image);")
  .content-overlay.text-center.my-md-4.py-sm-5.px-3
    h2.h1.text-light.py-lg-5.my-5 Parallax backgound image

<!-- Element parallax -->
<div class="position-relative mx-auto" style="max-width: 5rem; min-height: 33rem;">
  <div class="content-overlay pt-5" data-jarallax-element="100">
    <img src="path-to-moving-car-image" alt="Car">
  </div>
  <div class="position-absolute top-0 start-50 translate-middle-x h-100 overflow-hidden">
    <img src="path-to-static-road-line-image" width="2" alt="Road line">
  </div>
</div>

// Element parallax
.position-relative.mx-auto(style="max-width: 5rem; min-height: 33rem;")
  .content-overlay.pt-5(data-jarallax-element="100")
    img(src="path-to-moving-car-image", alt="Car").pt-3.mt-5
  .position-absolute.top-0.start-50.translate-middle-x.h-100
    img(src="path-to-static-road-line-image", width="2", alt="Road line")

<!-- Cursor position parallax -->
<div class="parallax">
  <div class="parallax-layer position-relative" data-depth="0.1">
     <img src="path-to-image" alt="Layer">
  </div>
  <div class="parallax-layer" data-depth="0.16">
     <img src="path-to-image" alt="Layer">
  </div>
  <div class="parallax-layer" data-depth="0.38">
     <img src="path-to-image" alt="Layer">
  </div>
  <!-- Add as many layers as you need with different data-depth parameters for more 3D-like effect. Make sure add position-relative to biggest layer to keep width and height of the whole scene. -->
</div>

// Cursor position parallax
.parallax
  .parallax-layer.position-relative(data-depth="0.1")
    img(src="path-to-image", alt="Layer")
  .parallax-layer(data-depth="0.16")
    img(src="path-to-image", alt="Layer")
  .parallax-layer(data-depth="0.38")
    img(src="path-to-image", alt="Layer")
  //- Add as many layers as you need with different data-depth parameters for more 3D-like effect. Make sure add position-relative to biggest layer to keep width and height of the whole scene.