Zoom In Image On Vertical Page Scrolling

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.