0.1kb Background Parallax Scroll Plugin In jQuery
File Size: | 3.5 KB |
---|---|
Views Total: | 1083 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is the smallest parallax scrolling library in the world I have ever seen.
It uses jQuery's scroll()
function to track the scroll event and applies a subtle parallax scrolling effect to background images by adjusting the background-position
property of them while scrolling the page.
How to use it:
1. Add the CSS class parallax-bg
to the parallax container.
<section class="parallax-container parallax-bg"> Parallax Container </section>
2. Add a background image to the container.
.parallax-container { background-image: url(bg.jpg); background-size: cover; background-repeat: no-repeat; }
3. Apply the parallax scrolling effect to the background image. Just paste and insert the following jQuery script after jQuery and done.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
$(window).scroll(function () { parallax(); }) function parallax() { var wScroll = $(window).scrollTop(); $('.parallax-bg').css('background-position', 'center '+(wScroll*0.75)+'px') }
4. Or directly load the parallax.js
after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="./js/parallax.js"></script>
This awesome jQuery plugin is developed by rakibwebdev. For more Advanced Usages, please check the demo page or visit the official website.