Zoom Image On Scroll Using JavaScript

Create Zoom Image On Scroll Using JavaScript

Create Zoom Image On Scroll Using JavaScript

Hello Coder! Welcome to the Codewithrandom blog. In this blog, We learn how to Create a Zoom Image On the Scroll Effect Using JavaScript. When you scroll down and the image zooms and when you scroll up image re-size to the original size.

 

Zoom Image On Scroll Using JavaScript
Zoom Image On Scroll Using HTML,CSS, and jQuery

 

Javascript was used to develop the zoom image on scroll feature, which makes it simple for users to zoom in and out of the image and move around the website. It is an undertaking that is simple enough for beginners to complete and will help all skepticism disappear.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

 

Code byN/A
Project DownloadLink Available Below
Language usedHTML ,CSS and jQuery Code
External link / DependenciesYes
ResponsiveYes
Zoom Image On Scroll Table

 

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Zoom Image On Scroll.

HTML Code For Zoom Image On Scroll

<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>

We need to include a few crucial links inside the HTML before we put the structure. The CSS link will be added inside the head section and the link to the Javascript file will be added before the end of the body tag in order to link the two files together inside our project. We will make separate files for Javascript and CSS in order to manage our project.

Now to add thestructure for our project we will create two section one is the hero section and the other is the container for our the content of the website.Inside the hero section using the img tag we will add the image inside our project.

The heading for our zoom image will then be created using the <h1> tag, and using the <p> element, we will add the lorem text inside the paragraph to add the content to our image scroll.

There is all the Html code for the Zoom Image On Scroll. Now, you can see output without Css and jQuery Code.then we write Css for basic styling of the project and Zoom Image On Scroll Using JQuery Code.

How To Build Interest Calculator Using JavaScript

Only Html Code Output

 

 

Zoom Image On Scroll Using HTML,CSS and jQuery
Zoom Image On Scroll Using HTML,CSS and jQuery

 

Zoom Image On Scroll Using HTML,CSS and jQuery

 

 

 

 

 

CSS Code For Zoom Image On Scroll

 

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

 

Step1: Using the html tag selector we will set the font family as “Helevicta” and using the font size property we will set the font size as 62.5% . The padding and margin is set as “zero”.

Using the h1 tag we will set the font size of our h1 as 6.5rem and using the color property we will set the font color as orange and using the text align property we will align the heading at the center.

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

Step2: Using the <p>paragraph tag we will set the font size as “1.8rem” and using the margin property we will set the margin as  2rem and we will also add a line height of  2.5rem to our image and using the width property we will set the width as “100%” of our hero section .

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

50+ HTML, CSS & JavaScript Projects With Source Code

 

Html + Css Updated Output Zoom Image On Scroll

 

ADVERTISEMENT

 

ADVERTISEMENT

Zoom Image On Scroll Using HTML,CSS and jQuery
 

 

ADVERTISEMENT

Zoom Image On Scroll Using HTML,CSS and jQuery
 

ADVERTISEMENT

 

ADVERTISEMENT

 

 

jQuery Code For Zoom Image On Scroll

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

The window and the scroll method will now be used to make a variable scroll. We can scroll inside the picture and have the text appear over the image by using the width property and the scrolltop() method.

Video Output Zoom Image On Scroll :

Final Output Of Zoom Image On Scroll Using JavaScript:-

 

 

Zoom Image On Scroll Using HTML,CSS and jQuery
Zoom Image On Scroll Using HTML,CSS and jQuery

50+ HTML, CSS and JavaScript Projects With Source Code

Now that we have completed our Zoom Image On Scroll. Here is our updated output with HTML, CSS, and 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 HTML, CSS, and jQuery. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki 

 

Which code editor do you use for this Zoom Image On Scroll?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

Which property is used for image scroll controlling?

The background-attachment property can be used to control how a picture scrolls in the background.

Which is the purpose of adding a Zoom image scroll?

Increasing the website’s interactivity is done using the image scroll attribute. used additionally to improve the picture scroll’s user experience feature.



Leave a Reply