Tiny Background Parallax Scrolling Effect Plugin - Diurnal Parallax

Diurnal Parallax is an ultra-light jQuery plugin that makes it simple to apply a subtle parallax scrolling effect to background images while scrolling down/up the page.

How to use it:

1. Include reference to jQuery library and the Diurnal Parallax plugin at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.diurnal.min.js"></script>

2. Add background images to parallax containers using the data-parallax-image attribute:

<section class="parallax-bg" data-parallax-image="bg-1.jpg">
  Parallax Container 1
</section>

<section class="parallax-bg" data-parallax-image="bg-2.jpg">
  Parallax Container 2
</section>

<section class="parallax-bg" data-parallax-image="bg-3.jpg">
  Parallax Container 3
</section>

...

3. Call the function dParallax() on the parallax containers and the plugin will do the rest.

$(function(){
  $('.parallax-bg').dParallax();
});

4. Config the speed of the parallax scrolling using the data-parallax-speed attribute. Default: 15.

<section class="parallax-bg" data-parallax-speed="50" data-parallax-image="bg-1.jpg">
  Parallax Container 1
</section>

<section class="parallax-bg" data-parallax-speed="10" data-parallax-image="bg-2.jpg">
  Parallax Container 2
</section>

<section class="parallax-bg" data-parallax-speed="60" data-parallax-image="bg-3.jpg">
  Parallax Container 3
</section>

...

---

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