Create Scroll Zoom using HTML, CSS & JavaScript

Earlier when we used to see images of objects or if we want to see clearly we would use magnifying glasses but nowadays when we want to observe or look at a particular part that we zoom in.

The same goes with Computers and Laptops earlier when there was Microsoft Windows Professional we have to use CTRL + command to zoom.

Using HTML And CSS we present Create Scroll Zoom Using HTML, CSS, & JavaScript projects with source code available for you to copy and paste directly into your own project.

Now there’s also an alternative feature to zoom just use the scroll button in the mouse to zoom in to see pictures. Hey, guys Welcome back to Codewithrandom in today’s blog we’ll be seeing how to create the On Scroll Zoom Project using HTML, CSS, And JavaScript which is an intermediate project for front-end developers.

I hope you have got an idea about the project.

HTML Code for On Scroll Zoom

  <section class="hero-section" id="js-hero">
    <img src="https://images.unsplash.com/photo-1585247226801-bc613c441316?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"/>
  </section>
  <section class="container">
    <h1>Code With Random</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>

A simple HTML code to design the structure which basically means creating a simple webpage with content and adding an image because we’ll be applying the zoom effect on it and linking a jQuery script at the bottom which will later help us to add the zoom-in effect. Let’s code the CSS part for styling.

CSS Code for On Scroll Zoom

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%);
}

In this CSS code, we have just aligned each tag that is defined in the HTML Code and the content which is present in the tags such as h1 & p. Also we have specified the width in it so that every element gets a proper space. Now, let’s code the most important part of this project which help us to conclude the project. Let’s code the JavaScript part.

5+ HTML CSS Projects With Source Code

JavaScript Code for On Scroll

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

I know this is a small JavaScript code because here we don’t have to call the classes or id which is defined in the HTML file we just have defined a var called scroll in the JS Script and defined the width that how to portion should cover in each scroll and also specified the image name. Let us see the final output.

Final Output Zoom On Scroll JavaScript

50+ Html, Css &Javascript Projects With Source Code

We have successfully created our Create Scroll Zoom Using HTML, CSS, & JavaScript| Zoom On Scroll JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

Using HTML And CSS we provide you with Create Scroll Zoom Using HTML, CSS, & JavaScript projects with source code available for you to copy and paste directly into your own project.

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Happy Learning!!!

Written By – Harsh Sawant

Code By – @harshh9