Basic Image Parallax Scrolling Effect with jQuery
File Size: | 2.87 KB |
---|---|
Views Total: | 9303 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A basic jQuery & CSS solution to add familiar parallax scrolling effect to position:absolute
images using jQuery scroll()
event.
How to use it:
1. Add your parallax images into '.parallax-image' containers.
<div class="parallax-image"> <img src="https://unsplash.it/1800/800?image=289"> </div> <div class="parallax-image"> <img src="https://unsplash.it/1800/800?image=277"> </div> <div class="parallax-image"> <img src="https://unsplash.it/1800/800?image=274"> </div> <div class="parallax-image"> <img src="https://unsplash.it/1800/800?image=271"> </div> <div class="parallax-image"> <img src="https://unsplash.it/1800/800?image=275"> </div>
2. The required CSS style rules for the container & parallax images.
.parallax-image { height: 600px; position: relative; } .parallax-image img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
3. Import the latest version of jQuery library into the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
4. Active the image parallax effect when scrolling.
$(window).scroll(function(){ // Add parallax scrolling to all images in .paralax-image container $('.parallax-image').each(function(){ // only put top value if the window scroll has gone beyond the top of the image if ($(this).offset().top < $(window).scrollTop()) { // Get ammount of pixels the image is above the top of the window var difference = $(window).scrollTop() - $(this).offset().top; // Top value of image is set to half the amount scrolled // (this gives the illusion of the image scrolling slower than the rest of the page) var half = (difference / 2) + 'px'; $(this).find('img').css('top', half); } else { // if image is below the top of the window set top to 0 $(this).find('img').css('top', '0'); } }); });
This awesome jQuery plugin is developed by kristyjy. For more Advanced Usages, please check the demo page or visit the official website.