Telegram Group Join Now
ADVERTISEMENT
Create Scroll Animation Using HTML,CSS and JavaScript
ADVERTISEMENT
ADVERTISEMENT
Welcome to the Codewithrandom blog. In this blog, We learn how to create a Scroll Animation. We use HTML, CSS, and JavaScript for this Scroll Animation.
I hope you enjoy our blog so let’s start with a basic html structure for a Scroll Animation.
ADVERTISEMENT
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>
There is all the Html Code for the Scroll Animation. Now, you can see output without Css and JavaScript. then we write Css for styling Scroll Animation and give Scrolling Functionality using JavaScript for the Scroll Animation.
ADVERTISEMENT
50+ HTML, CSS & JavaScript Projects With Source Code
Html Code Output
ADVERTISEMENT
CSS Code For Scroll Animation
@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;
}
Now we have completed our Css Section Scroll. Here is our updated output HTML + CSS.
Gym Website Using HTML and CSS Source Code
Output
ADVERTISEMENT
ADVERTISEMENT
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')
}
})
}
Final Output Of Scroll Animation Using HTML,CSS and JavaScript
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Now we have completed our Scroll Animation Project. 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.
ADVERTISEMENT
Thank you!
ADVERTISEMENT
In this post, we learn how to Create Scroll Animation Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
ADVERTISEMENT
Written by – Code With Random/Anki
ADVERTISEMENT