zoom image scrolling - Download Zoom In Image On Vertical Page Scrolling

Download Zoom In Image On Vertical Page Scrolling

By Posted on

This time I will share jQuery Plugin and tutorial about Zoom In Image On Vertical Page Scrolling, hope it will help you in programming stack.

zoom image scrolling - Download Zoom In Image On Vertical Page Scrolling
File Size: 3.41 KB
Views Total: 5710
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

An image zoom effect for hero section of your webpage that zooms in the image on vertical page scrolling using jQuery and CSS.

How to use it:

1. Add an image to the hero section.

view source
1 <section class="hero-section" id="js-hero">
2   <img src="https://source.unsplash.com/random/1920x1080"
3        alt="Image Alt" />
4 </section>

2. The necessary CSS/CSS3 styles for the hero section & image.

view source
01 .hero-section {
02   width: 100%;
03   height: 70rem;
04   overflow: hidden;
05   position: relative;
06 }
07  
08 .hero-section img {
09   width: 100%;
10   position: absolute;
11   top: 0;
12   left: 50%;
13   transform: translate(-50%);
14 }

3. Add the latest version of jQuery JavaScript library to the page.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>

4. The JavaScript (jQuery script) to zoom the hero image on scroll.

view source
1 $(window).scroll(function() {
2   var scroll = $(window).scrollTop();
3   $("#js-hero img").css({
4     width: (100 + scroll/5) + "%"
5   })
6 })

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

source : jquery.net

Related posts: