html-parallax
Tiny jQuery script to add parallax effect to the image added in you html code Unbilievably small plugin to add parallax effect to the banners in your existing website with small js code having only 36 lines of code when not compressed.
Installation
- Add script to your html page
<script src="js/html-parallax.js" type="text/javascript"></script>
- Add any any class (eg:
l-parallax
) to the element you want to add parallax effect<div class="l-parallax" style="background-image: url(img/img1.jpg);" data-speed="0.5"></div>
- Add image using inline
style
tag andbackground-image
css property<div class="l-parallax" style="background-image: url(img/img1.jpg);" data-speed="0.5"></div>
- Add custom attribute
data-speed
to define speed of parallax effect<div class="l-parallax" style="background-image: url(img/img1.jpg);" data-speed="0.5"></div>
- Call parallax function
$(".l-parallax").parallax();
after loading all required js<script src="js/jquery.min.js"></script> <script src="js/html-parallax.js" type="text/javascript"></script> <script> $(document).ready(function () { $(".l-parallax").parallax(); }); </script>
- Done