Hello Coder! Welcome to the Codewithrandom blog. In this blog, We learn how to create a Scroll Animation Using CSS. When you scroll a webpage content comes from animation from different sides.
We use Html, Css, and JavaScript for Scroll animation. The reason for using JavaScript in this project is that we get better and smooth scroll animation.
Scroll animations are any kind of animation that takes place while the visitor scrolls up or down a website. In scrolling animation, as the user scrolls the website form up to down the image and video effect we applied on our website give different effects.
I hope you enjoy our blog so let's start with a basic html structure for a Scroll Animation.
HTML Code For Scroll Animation:-
<body>
<h1>Scroll animation codewithrandom</h1>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
<div class="box"><h2>image</h2></div>
</body>
Now we need to implement the framework for our scroll animation. First, using the h1 tag selector, we will add the heading for our scroll animation. Next, using the div> tag with the class box, we will make a container, and inside the container, using the h2 tag, we will add the title picture. For numerous images, we'll make a unique container in a similar fashion.
For the scroll motion, the entire HTML code is present. Currently, JavaScript and CSS are not present in the result. the scroll animation is then styled using CSS, and scrolling capability is added using JavaScript.
Scroll Animation CSS Code:-
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}
h1 {
margin: 10px;
}
.box {
background: url(https://source.unsplash.com/1600x900/?nature,water) ;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
margin: 10px;
border-radius: 6px;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
transform: translateX(400%);
transition: transform 0.4s ease;
}
.box:nth-of-type(even) {
transform: translateX(-400%);
}
.box.show {
transform: translateX(0);
}
.box h2 {
font-size: 45px;
}
Step1: We'll use the Google import link to incorporate Google fonts into our scroll animation project. We're going to use the Google import link to add the Roboto Google font to our project. Using the universal selector, we'll adjust the box dimension to "border-box."
Using the h1 tag selector, we will set the margin as "10 px," the background color property will be set to "white," the font family will be set to "Roboto," the display will be set to flex, and the body tag selector will be used to set the background color and font family.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}
h1 {
margin: 10px;
}
Step2:The image will be added to the box's background using the url link, the hue property will be set to white, the text will be centre-aligned using the text align property, and the class selector (.box) will be used to add the image to the background of the box. "300px" and "200px," accordingly, are the values for the width and height. We will modify the box by using the transform attribute.
.box {
background: url(https://source.unsplash.com/1600x900/?nature,water) ;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
margin: 10px;
border-radius: 6px;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
transform: translateX(400%);
transition: transform 0.4s ease;
}
.box:nth-of-type(even) {
transform: translateX(-400%);
}
.box.show {
transform: translateX(0);
}
.box h2 {
font-size: 45px;
}
Now we have completed our Css Section Scroll.
Now add JavaScript for Showing Images in Div and Scroll Animation functionality.
JavaScript Code For Scroll Animation:-
const boxes = document.querySelectorAll('.box')
window.addEventListener('scroll', checkBoxes)
checkBoxes()
function checkBoxes() {
const triggerBottom = window.innerHeight /5 * 4
boxes.forEach(box => {
const boxTop = box.getBoundingClientRect().top
if(boxTop < triggerBottom) {
box.classList.add('show')
} else {
box.classList.remove('show')
}
})
}
We'll make a variable named boxes and use the document using the const keyword. queryselectorThe HTML components will all be chosen. employing the window. AddEventListener: In addition to creating a checkBoxes () method and a scroll event listener, we will also shrink the window. The class list will be added after we verify the innerheight property to see if the box top is visible, and it will be removed as the user scrolls up the website.
Here is our updated output with Html, Css, and JavaScript. Hope you like the Scroll Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
Written by - Code With Random/Anki
Top comments (0)