This time I will share jQuery Plugin and tutorial about Apply Parallax & Zoom Effects To Images On Scroll Using jQuery, hope it will help you in programming stack.
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.
1 |
<header class="parallax-zoom-blur"> |
2. The primary CSS styles.
06 |
@media (min-width: 600px) { |
08 |
header { padding-bottom: 50%; } |
12 |
@media (min-width: 700px) { |
14 |
header { padding-bottom: 45%; } |
24 |
-webkit-transform: translateX(-50%); |
25 |
-ms-transform: translateX(-50%); |
26 |
transform: translateX(-50%); |
3. Load the latest version of jQuery library at the end of the document.
1 |
<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.
1 |
$(window).scroll(function() { |
2 |
var scroll = $(window).scrollTop(); |
3 |
$(".parallax-zoom-blur img").css({ |
4 |
width: (100 + scroll/5) + "%", |
5 |
top: -(scroll/10) + "%", |
6 |
"-webkit-filter": "blur(" + (scroll/100) + "px)", |
7 |
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.
