Minimalist Background Parallax Plugin With jQuery - Slock

File Size: 3.71 KB
Views Total: 1536
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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);">

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.


5. Adjust the parallax scrolling effect:

  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.