Zoom In Image On Vertical Page Scrolling

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

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" />

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" 

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.