Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom

Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom

Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn how we create Zoom Image On Scroll. We use HTML, Css, and  Jquery for this Zoom Image On Scroll. I hope you enjoy our blog so let's start with a basic HTML structure for the Zoom Image On Scroll.

HTML Code

  <section class="hero-section" id="js-hero">  
   <img src="https://source.unsplash.com/uN1m9Ca0aqo"  
   alt="Photo by Tamara Bellis on Unsplash" />  
  </section>  
  <section class="container">  
   <h1>Summer In Winter</h1>  
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
   veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
   commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  
   velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id  
   est laborum.</p>  
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
   veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
   commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  
   velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id  
   est laborum.</p>  
  </section>  
  <!-- JavaScript & jQuery -->  
 <script src="https://code.jquery.com/jquery-3.3.1.js"  
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="  
      crossorigin="anonymous">  
 </script>  
 <script src="js/index.js"></script>  
There is all the HTML code for the Zoom Image On Scroll. Now, you can see an output with Zoom Image On Scroll then we write  Jquery for Zoom Image On Scroll.
output
Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom

Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom

CSS code

 html {  
  font-family: Helvetica, Arial, sans-serif;  
  font-size: 62.5%;  
 }  
 body {  
  margin: 0;  
  padding: 0;  
 }  
 h1 {  
  font-size: 6.5rem;  
  color: #f39c12;  
  text-align: center;  
  font-weight: 300;  
 }  
 p {  
  font-size: 1.8rem;  
  color: #777;  
  margin: 2rem 0;  
  line-height: 2.5rem;  
 }  
 p:first-child {  
  margin-top: 0;  
 }  
 .container {  
  width: 75%;  
  margin: 0 auto;  
 }  
 .hero-section {  
  width: 100%;  
  height: 70rem;  
  overflow: hidden;  
  position: relative;  
 }  
 .hero-section img {  
  width: 100%;  
  position: absolute;  
  top: 0;  
  left: 50%;  
  transform: translate(-50%);  
 }  
Css Updated output

Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom

Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom

Javascript( Jquery) code

 $(window).scroll(function() {  
  var scroll = $(window).scrollTop();  
  $("#js-hero img").css({  
   width: (100 + scroll/5) + "%"  
  })  
 })  
Final output

Zoom Image On Scroll | Zoom Image On Scroll Jquery - Codewithrandom


Now that we have completed our Jquery section,  Here is our updated output with  JqueryHope you like the Zoom Image On Scroll. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Zoom Image On Scroll using simple HTML & CSS, and  Jquery. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post