Zoom In Image On Vertical Page Scrolling
File Size: | 3.41 KB |
---|---|
Views Total: | 9987 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<section class="hero-section" id="js-hero"> <img src="https://source.unsplash.com/random/1920x1080" alt="Image Alt" /> </section>
2. The necessary CSS/CSS3 styles for the hero section & image.
.hero-section { width: 100%; height: 70rem; overflow: hidden; position: relative; } .hero-section img { width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%); }
3. Add the latest version of jQuery JavaScript library to the page.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script>
4. The JavaScript (jQuery script) to zoom the hero image on scroll.
$(window).scroll(function() { var scroll = $(window).scrollTop(); $("#js-hero img").css({ width: (100 + scroll/5) + "%" }) })
This awesome jQuery plugin is developed by Jason D'Oyley. For more Advanced Usages, please check the demo page or visit the official website.