Apply Parallax Zoom Effects To Images On Scroll Using jQuery - Download Apply Parallax & Zoom Effects To Images On Scroll Using jQuery

Download Apply Parallax & Zoom Effects To Images On Scroll Using jQuery

Posted on

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.

Apply Parallax Zoom Effects To Images On Scroll Using jQuery - Download Apply Parallax & Zoom Effects To Images On Scroll Using jQuery
File Size: 3.05 KB
Views Total: 20945
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.

1 <header class="parallax-zoom-blur">
3 </header>

2. The primary CSS styles.

01 header {
02   overflow: hidden;
03   padding-bottom: 55%;
04 }
05  
06 @media (min-width: 600px) {
07  
08 header { padding-bottom: 50%; }
09  
10 }
11  
12 @media (min-width: 700px) {
13  
14 header { padding-bottom: 45%; }
15  
16 }
17  
18 header img {
19   width: 100%;
20   max-width: none;
21   position: fixed;
22   top: 0%;
23   left: 50%;
24   -webkit-transform: translateX(-50%);
25   -ms-transform: translateX(-50%);
26   transform: translateX(-50%);
27 }

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)"
8   });
9 });

This awesome jQuery plugin is developed by derekjp. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net