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
   
Configurable Parallax Backgrounds In JavaScript - jQuery Parallaxing

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.