Css scroll animation | scroll animation html css javascript code - codewithrandom

Css scroll animation |  scroll animation html css javascript code - codewithrandom

Css scroll animation |  scroll animation html css javascript code - codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Css scroll animation. We use HTML, and javascript for this Css scroll animation. Hope you enjoy our blog so let's start with a basic HTML structure for a Css 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>  
There is all HTML code for the scroll animation. Now, you can see output without CSS, then we write css & javascript for the scroll animation.
output
Css scroll animation |  scroll animation html css javascript code - codewithrandomCss scroll animation |  scroll animation html css javascript code - codewithrandom

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,  Here is our updated output CSS.

output
Css scroll animation |  scroll animation html css javascript code - codewithrandom

Now add javascript for showing image &  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
Css scroll animation |  scroll animation html css javascript code - codewithrandom


Css scroll animation |  scroll animation html css javascript code - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the simple scroll animation. you can see 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 an scroll animation using simple HTML & CSS and javascript. 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 

Post a Comment

Previous Post Next Post