
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.
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(); });
This awesome jQuery plugin is developed by mokrane33. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 25.09.2018
- Source