Create A Simple Background Parallax Effect Using jQuery
File Size: | 2.47 KB |
---|---|
Views Total: | 2494 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<div class="bg"></div>
2. Add a background image to the DIV and make it position:relative
.
.bg { position: relative; z-index: -1; height: 500px; background-image: url('bg.jpg'); background-repeat: no-repeat; background-size: cover; background-size: 100% 100%; }
3. Load the needed jQuery library in your webpage.
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
4. Enable the parallax scrolling effect on the DIV element.
$(document).ready(function() { $(window).on('scroll', function() { yPos = window.pageYOffset; shift = yPos * 0.8 + 'px'; $('.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.