This time I will share jQuery Plugin and tutorial about Create A Simple Background Parallax Effect Using jQuery, hope it will help you in programming stack.
A minimalist jQuery solution to implement a smooth on-scroll background image parallax effect on a position:relative container.
How to use it:
1. Create a DIV element on your webpage.
2. Add a background image to the DIV and make it position:relative.
5 |
background-image: url('bg.jpg'); |
6 |
background-repeat: no-repeat; |
7 |
background-size: cover; |
8 |
background-size: 100% 100%; |
3. Load the needed jQuery library in your webpage.
1 |
<script src="//code.jquery.com/jquery-1.11.3.js"></script> |
4. Enable the parallax scrolling effect on the DIV element.
1 |
$(document).ready(function() { |
2 |
$(window).on('scroll', function() { |
3 |
yPos = window.pageYOffset; |
4 |
shift = yPos * 0.8 + 'px'; |
5 |
$('.bg').css('top', shift); |
This awesome jQuery plugin is developed by captainmoha. For more Advanced Usages, please check the demo page or visit the official website.
