Zoom In Image On Vertical Page Scrolling

Zoom In Image On Vertical Page Scrolling
File Size: 3.41 KB
Views Total:
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.