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
  </div>
</div>

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

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

$('.parallaxContainer').slim_parallax();

5. Specify the animation speed.

$('.parallaxContainer').slim_parallax({
  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
  </div>
</div>

---

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