Tiny Background Parallax Scrolling Effect Plugin - Diurnal Parallax
File Size: | 3.74 KB |
---|---|
Views Total: | 1608 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.