Apply Parallax & Zoom Effects To Images On Scroll Using jQuery
File Size: | 3.05 KB |
---|---|
Views Total: | 22551 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a simple jQuery & CSS/CSS3 solution to apply subtle parallax, zoom and blur effects to any images as you scroll down the web page.
How to use it:
1. Add an images into a container.
<header class="parallax-zoom-blur"> <img src="https://unsplash.it/1800/1200?image=883"> </header>
2. The primary CSS styles.
header { overflow: hidden; padding-bottom: 55%; } @media (min-width: 600px) { header { padding-bottom: 50%; } } @media (min-width: 700px) { header { padding-bottom: 45%; } } header img { width: 100%; max-width: none; position: fixed; top: 0%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
3. Load the latest version of jQuery library at the end of the document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
4. Enable the parallax / zoom / blur effects on the header images using window scroll.
$(window).scroll(function() { var scroll = $(window).scrollTop(); $(".parallax-zoom-blur img").css({ width: (100 + scroll/5) + "%", top: -(scroll/10) + "%", "-webkit-filter": "blur(" + (scroll/100) + "px)", filter: "blur(" + (scroll/100) + "px)" }); });
This awesome jQuery plugin is developed by derekjp. For more Advanced Usages, please check the demo page or visit the official website.