Smooth Parallax Effect For Image - jquery.parallax.js

Yet another jQuery Parallax scrolling plugin which applies a responsive, smooth parallax effect to images while scrolling.

Based on CSS3 3D transforms and compatible with desktop/tablet/mobile.

How to use it:

1. Wrap your image into a parallax element.

<div class="parallax example">
  <img src="https://picsum.photos/1280/960/?random">
</div>

2. Wrap the parallax element into a container with a fixed height.

<div class="parallax-container">
  <div class="parallax example">
    <img src="https://picsum.photos/1280/960/?random">
  </div>
</div>

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 300px;
}

3. The necessary CSS for the parallax image.

.parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.parallax img {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  transform: translateX(-50%);
}

4. Import the JavaScript jquery.parallax.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.parallax.js"></script>

5. Initialize the plugin and done.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.parallax.js"></script>

---

This awesome jQuery plugin is developed by nsrosenqvist. For more Advanced Usages, please check the demo page or visit the official website.