Simple And Small Parallax Plugin For Background Images - slimParallax

File Size: 14.8 KB
Views Total: 814
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple And Small Parallax Plugin For Background Images - slimParallax

slimParallax is a simple, lightweight jQuery plugin to create responsive smooth parallax scroll effect on background images that auto update on window resize & scroll.

How to use it:

1. Add a background image to your parallax container.

<div class="example parallaxContainer">
  <div class="container">
    Any Content Here
.example {
  background-image: url(bg.jpg);

2. Apply a fixed height to the parallax container and make the background image position fixed.

.parallaxContainer {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 400px;

3. Insert jQuery JavaScript library and the jQuery slimParallax plugin's script into the html page.

<script src="" 
<script src="js/slimparallax.min.js"></script>

4. Call the plugin to enable the parallax scroll effect on the background image.


5. Specify the animation speed.

  speed: 10

6. You can also specify the animation speed via data-slim-prx-speed attribute. Great for multiple parallax containers on the page.

<div class="example parallaxContainer" data-slim-prx-speed="10">
  <div class="container">
    Any Content Here

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