Mobile-compatible Parallax Effect For Background Images - jQuery mkParallax

mkParallax is a super small jQuery plugin that applies a smooth, performance, scroll-triggered parallax effect to background images.

Works perfectly on Desktop, Tablet, and Mobile.

How to use it:

1. Add a background image to the parallax container using the 'data-image' attribute:

<div id="parallaxContainer" data-image="https://picsum.photos/1920/1080/?random">

  <h2>mkParallax Example</h2>

</div>

2. The parallax container must have a fixed height.

#parallaxContainer { 
  height: 400px; 
}

3. Download and insert the JavaScript file 'jquery.mkParallax.js' after you've loaded the latest jQuery library.

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

4. Enable the parallax scroll effect on your background image.

$( document ).ready(function() {

  $("#parallaxContainer").mkParallax();

});

Changelog:

09/26/2018

• JS update

---

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