Zoom Image On Scroll | Zoom Image On Scroll Jquery – Codewithrandom

  <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

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

Javascript( Jquery) code

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

Final output

Now that we have completed our Jquery section,  Here is our updated output with  Jquery. Hope 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 

Check out more…..

1.html css projects with source code

2. weather app using html css and javascript

3. add to cart button css

4. hamburger menu css

5. multi step form html