Configurable Parallax Backgrounds In JavaScript - jQuery Parallaxing
| File Size: | 9.81 KB |
|---|---|
| Views Total: | 968 |
| 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.











