CODEWITHSUNDEEP
javascripthtmlcssscroll
BadControl Hypnos
BadControl Hypnos

Reputation: 121

Showing the div after scrolling down the website

I want to set the animation of the element while scrolling down the page. I want to use only JavaScript to achieve that.

I wanted it to work like this: There is no animation, but when you scroll down to second container, the JS sets the animation and the content inside the container is shown.

The problem is, when I load the page, there is no animation (That's good). When I scroll down, there is still no animation (That's bad!) but when I refresh the page with F5 while being on the bottom of the site, the animation shows up but still not showing my element with blue background.

Here is my full code for this part:

    <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .main {
        display: block;
        margin: auto;
        height: 1000px;
        width: 100%;
        background-color: grey;
    }

    .main-inner1 {
        display: block;
        margin: auto;
        height: 600px;
        width: 100%;
        background-color: orange;
    }

    .main-inner2 {
        display: block;
        margin: auto;
        height: 600px;
        width: 100%;
        background-color: green;
    }

    .main-inner2-container {
        display: block;
        position: relative;
        height: 50px;
        width: 200px;
        overflow: hidden;
        margin: auto;
    }

    .main-inner2-content1 {
        display: block;
        position: absolute;
        top: 100%;
        margin: auto;
        height: 50px;
        width: 200px;
        background-color: blue;
    }

    @keyframes FadeIn {
        { from: top: 100%; }
        { to: top: 0; }
    }   

</style>
<script>
    
    document.addEventListener("DOMContentLoaded", function(){

        var y = window.scrollY;

        var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;

        if (y >= x) {
            document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
        } 
    });

</script>

<body>
<div class="main">
    <div class="main-inner1"></div>
    <div class="main-inner2">
        <div class="main-inner2-container">
            <div class="main-inner2-content1">
            
            </div>
        </div>
    </div>
</div>

I'm learning JS so it's important to me to not use any libraries :P

Thanks a lot

Upvotes: 0

Views: 105

Answers (1)

Sara
Sara

Reputation: 751

I modified your code a bit. You were listening for DOMContentLoaded event which is fired only once (after the DOM is completely loaded), instead of window scroll event.

window.onscroll = function() {
        var y = window.scrollY;

        var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
        
        if (y >= x) {
            document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
        } 
    }
* {
        margin: 0;
        padding: 0;
    }

    .main {
        display: block;
        margin: auto;
        height: 1000px;
        width: 100%;
        background-color: grey;
    }

    .main-inner1 {
        display: block;
        margin: auto;
        height: 600px;
        width: 100%;
        background-color: orange;
    }

    .main-inner2 {
        display: block;
        margin: auto;
        height: 600px;
        width: 100%;
        background-color: green;
    }

    .main-inner2-container {
        display: block;
        position: relative;
        height: 50px;
        width: 200px;
        overflow: hidden;
        margin: auto;
    }

    .main-inner2-content1 {
        display: block;
        position: absolute;
        top: 100%;
        margin: auto;
        height: 50px;
        width: 200px;
        background-color: blue;
    }

    @keyframes FadeIn {
        from { top: 100%; } 
        to {top: 0; }
    }
<div class="main">
    <div class="main-inner1"></div>
    <div class="main-inner2">
        <div class="main-inner2-container">
            <div class="main-inner2-content1">
            
            </div>
        </div>
    </div>
</div>

Also, your syntax for defining keyframe was incorrect. It is

@keyframes FadeIn {
    from { top: 100%; } 
    to {top: 0; }
}

And not

@keyframes FadeIn {
    { from: top: 100%; }
    { to: top: 0; }
}

Upvotes: 2

Related Questions