Minimalist Background Parallax Plugin With jQuery - Slock

Slock is a really simple jQuery plugin that uses CSS transform and background-position-y properties to create a subtle parallax scrolling effect on your background images.

How to use it:

1. Download and insert the jQuery Slock plugin's script after jQuery library (slim build is recommended).

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="slock.js"></script>

2. Add a background image to your container on which you want to apply the parallax scrolling effect.

<div class="slock" style="background-image: url(bg.jpg);">
  ...
</div>  

3. The parallax container must have a fixed height as this.

.slock {
  height: 400px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateX(0);
  will-change: background-position-y;
}

4. Activate the parallax scrolling effect.

$(".slock").slock();

5. Adjust the parallax scrolling effect:

$(".slock").slock({
  speed: 0.2 
});

---

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