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…


This content originally appeared on DEV Community and was authored by Ahtsham Ajus

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>

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

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')
       }
   })
}

And Check this Post

Here's the output
Alt Text


This content originally appeared on DEV Community and was authored by Ahtsham Ajus


Print Share Comment Cite Upload Translate Updates
APA

Ahtsham Ajus | Sciencx (2021-06-16T08:28:59+00:00) Today I learned about Scroll Animation. Retrieved from https://www.scien.cx/2021/06/16/today-i-learned-about-scroll-animation/

MLA
" » Today I learned about Scroll Animation." Ahtsham Ajus | Sciencx - Wednesday June 16, 2021, https://www.scien.cx/2021/06/16/today-i-learned-about-scroll-animation/
HARVARD
Ahtsham Ajus | Sciencx Wednesday June 16, 2021 » Today I learned about Scroll Animation., viewed ,<https://www.scien.cx/2021/06/16/today-i-learned-about-scroll-animation/>
VANCOUVER
Ahtsham Ajus | Sciencx - » Today I learned about Scroll Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/16/today-i-learned-about-scroll-animation/
CHICAGO
" » Today I learned about Scroll Animation." Ahtsham Ajus | Sciencx - Accessed . https://www.scien.cx/2021/06/16/today-i-learned-about-scroll-animation/
IEEE
" » Today I learned about Scroll Animation." Ahtsham Ajus | Sciencx [Online]. Available: https://www.scien.cx/2021/06/16/today-i-learned-about-scroll-animation/. [Accessed: ]
rf:citation
» Today I learned about Scroll Animation | Ahtsham Ajus | Sciencx | https://www.scien.cx/2021/06/16/today-i-learned-about-scroll-animation/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts