Background parallax effect is a simple jQuery background image without any library.
Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll effect to background images by setting their background-mode property while scrolling the page.
Must Read: Responsive Parallax Scroll Background Image with jQuery Plugin
How to make use of 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 picture 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 picture.
<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 load the parallax.js after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="./js/parallax.js"></script>
See Demo And Download
Official Website(rakibwebdev): Click Here
This superior jQuery/javascript plugin is developed by rakibwebdev. For extra Advanced Usage, please go to the official website.
