Parallax Scrolling Effect Using jQuery And Plain CSS - mcparallax

mcparallax is a lightweight jQuery plugin to create a Parallax Scrolling Effect on background images that make foreground content moves faster than the background.

Based on the plain CSS background properties that dynamically alters the background position of your background image on window scroll.

Works perfectly on both desktop and mobile devices. Compatible with any CSS frameworks such as Bootstrap, Material Design Lite, etc.

To find more Parallax Scrolling Effect plugins or JavaScript libraries, check out our blog post: Best Parallax Scrolling Effect jQuery Plugins

How to use it:

1. Insert the minified version of jQuery mcparallax plugin after the latest jQuery JavaScript library (slim build).

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

2. Insert a parallax image to your container using the data-image-src attribute as these:

<section>

  <div class="mcparallax" 
       data-image-src="bg.jpg">
  </div>

  <div class="container ">
    Foreground Content Here
  </div>

</section>

3. That's it. You can adjust the speed of the parallax scroll effect using the data-speed attribute (2-10):

<div class="mcparallax" 
     data-image-src="bg.jpg"
     data-speed="3">
</div>

---

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