Trigger CSS Animations in JavaScript

I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only. I need to call/trigger CSS Animation when the user scrolls the page. Please help me out of this problem.

<html>

<head>
    <style>

        *
        {
            margin:0px;
        }
        #logo
        {
            position:fixed;
            top:200px;
            height:200px;
            width:1000px;
            left:5%;
            z-index:4; 


            opacity:0.8;
        }
        #earthlogo
        {
            position: fixed;
            top:200px;
            height:120px;
            align-self: center;
            left:5%; 
            margin-left: 870px;
            margin-top: 60px;
            z-index:4;


            opacity: 0.9;
        }
         @keyframes anim
        {
            50%
            {
                filter:blur(10px);
                transform: rotate(-15deg);
                box-shadow:0px 0px 10px 3px;
            }
            100%
            {
                height:100px;
                width:500px;
                left:10px;
                top:10px;
                box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
                background-color: rgba(0, 0, 1, 0.3);
                opacity: 0.7;
            }
        }

        @keyframes anim2
        {
                 50%
            {
                filter:blur(40px);
                transform: rotate(-15deg);
            }
            100%
            {
                height:60px;
                width:60px;
                left:10px;
                top:10px;
                margin-left: 435px;
                margin-top: 30px;
                opacity: 0.8;
            }
        }
        body
        {
            height: 2000px;
        }
        #backstar
        {
            position:fixed;
            width: 100%;
            z-index: 1;
        }
        #earth
        {
            position: absolute;
            width:100%;
            z-index: 2;
            top: 300px;
        }
    </style>
    <script>
        function start()
        {
            document.getElementById('logo').style.animation = "anim 2s 2s forward";
            document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
        }

</head>

<body>

    <img src="logo.png" id="logo" onclick="start();">
    <img src="earthlogo.gif" id="earthlogo" onscroll="start();">
    <img src="earth.png" id="earth">
    <img src="stars.jpg" id="backstar">

</body>

The simplest method to trigger CSS animations is by adding or removing a class - how to do this with pure Javascript you can read here:

How do I add a class to a given element?

If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass / removeClass.

All you have to do then is set a transition to a given element like this:

.el {
width:10px;
transition: all 2s;
}

And then change its state if the element has a class:

.el.addedclass {
width:20px;
}

Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.

Similar question here: Trigger a CSS keyframe animation via scroll

You could use CSS to hide the image / animation and show when the user scrolls. This would work like this:

CSS:

div {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}

#demo{
    display: none;
}

HTML:

<div id="myDIV"> </div>

<div id="demo">
     <img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>

Your javascript just needs to include an eventListener to call the function which triggers the display of your animation.

JS:

document.getElementById("myDIV").addEventListener("scroll", start);

function start() {
    document.getElementById('demo').style.display='block';
}

Vanilla JS version

document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");

来源：https://stackoverflow.com/questions/44846614/trigger-css-animations-in-javascript

标签

javascript

html

css

html5

css-animations