Configurable Parallax Backgrounds In JavaScript - jQuery Parallaxing
File Size: | 9.81 KB |
---|---|
Views Total: | 963 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Parallaxing is a lightweight, configurable, easy-to-use jQuery parallax plugin for creating responsive and mobile-compatible parallax scrolling backgrounds in a simple way.
How to use it:
1. To get started, include the Parallaxing plugin after loading jQuery JavaScript library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="parallaxing.js"></script>
2. Define the path to the parallax image in the data-parallaxing-img
attribute.
<div data-parallaxing-img="bg.jpg"> ... </div>
3. To automatically initialize the parallax plugin, just add the data-parallaxing
attribute to the parallax container. That's it.
<div data-parallaxing-img="bg.jpg" data-parallaxing> ... </div>
4. You can also intialize the parallax plugin via JavaScript.
$('.parallax-element').parallaxing();
5. Set the speed of parallax scrolling. Default: 0.
<div data-parallaxing-img="bg.jpg" data-parallaxing data-parallaxing-speed="0.2"> ... </div>
6. Set the bleed of the parallax background. Default: 0.
<div data-parallaxing-img="bg.jpg" data-parallaxing data-parallaxing-bleed="50"> ... </div>
This awesome jQuery plugin is developed by koderhtml. For more Advanced Usages, please check the demo page or visit the official website.