CODEWITHSUNDEEP
jqueryhtmlcss
view
view

Reputation: 29

When the user scrolls to the element, it will trigger the animation

Just new to adding effects. My div object is below the paragraphs. I wanted that if I will scroll down and go to that part, it will just trigger the event. However, it only triggers when the page load. How can I make that possible? I searched for the code that's inside the script but then it just triggers when the page load as I've stated before.

HTML:

   <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="bocss.css">
    </head>
    <body>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>


    <div id="object" class="slideLeft">Lorem ipsum</div>

    <script>
        $(window).scroll(function() {
            $('#object').each(function(){
            var wordPos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
                if (wordPos < topOfWindow+400) {
                    $(this).addClass("slideLeft");
                }
            });
        });
    </script>
    </body>
    </html>

CSS:

.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }           
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}

#object{
    background-color: #fe5652;

    visibility: hidden;
}

Upvotes: 0

Views: 35

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

You must remove the class from the html code and only add it with your script.

So instead of

<div id="object" class="slideLeft">Lorem ipsum</div>

make it 

<div id="object">Lorem ipsum</div>

you also need to add jQuery to your page, since you are using it, but have not loaded the library.

Update after seeing the algorithm a bit, the main extra issue is that you are checking against the top of the viewport while you should be checking against the bottom of the viewport.

So adjust the test to

$(window).scroll(function() {
    $('#object').each(function() {
        var wordPos = $(this).offset().top;
        var bottomOfPage = $(window).scrollTop()+$(window).height();

        if (wordPos < bottomOfPage) {
            $(this).addClass("slideLeft");
        }
    });
});

Demo at https://jsfiddle.net/s4nuwmje/1/

Upvotes: 0

GoofBall101
GoofBall101

Reputation: 308

You will need to use Javascript for this, look up some JS examples. There are a bunch out on the internet.

Upvotes: 1

Related Questions