DEV Community

Ahtsham Ajus
Ahtsham Ajus

Posted on

Today I learned about Scroll Animation

Here's my HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./style.css">
    <title>Scroll Animation</title>
</head>
<body>
    <h1>Scroll to see the animation</h1>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>

    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here's My Css Code

@import url('https://fonts.googleapis.com/css?family=Ubuntu');


*{
    box-sizing: border-box;
}

body {
    background-color: #efedd6;
    font-family:'Ubuntu', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
}
h1 {
    margin: 10px;
}

.box {
    background-color: steelblue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
    transform: translateX(200%);
    transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
    transform: translateX(-200%);  
}
.box.show {
    transform: translateX(0);
}

.box h2 {
    font-size: 45px;
} 
Enter fullscreen mode Exit fullscreen mode

Here's JavaScript

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')
       }
   })
}
Enter fullscreen mode Exit fullscreen mode

And Check this Post

Here's the output
Alt Text

Top comments (1)

Collapse
 
supportic profile image
Supportic

Now use the more efficient Intersection Observer API instead of listening on scroll. :)