Запуск CSS анимации в JavaScript

Я не знаю, как использовать JQuery, поэтому мне нужен метод, который может вызвать анимацию только с помощью JavaScript. Мне нужно вызвать / вызвать анимацию CSS, когда пользователь прокручивает страницу. Пожалуйста, помогите мне решить эту проблему.

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

7
css css-animations html html5 javascript

3 ответов

самый простой способ запуска анимации CSS - это добавление или удаление класса - как это сделать с чистым Javascript вы можете прочитать здесь:

как добавить класс к данному элементу?

если вы используете jQuery (который действительно должен быть легко узнать в базовом использовании), вы делаете это просто с addClass / removeClass.

все, что вам нужно сделать, это установить переход к данному элементу такой:

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

и затем измените его состояние, если элемент имеет класс:

.el.addedclass {
width:20px;
}

Примечание: этот пример был с переходной экономикой. Но для анимации это то же самое: просто добавьте анимацию на элемент, который имеет класс на нем.

подобный вопрос здесь: запуск анимации ключевого кадра CSS с помощью прокрутки

5

вы можете использовать CSS, чтобы скрыть изображение / анимацию и показать, когда пользователь прокручивает. Это будет работать следующим образом:

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>

ваш javascript просто должен включать eventListener для вызова функции, которая запускает отображение вашей анимации.

JS:

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

function start() {
    document.getElementById('demo').style.display='block';
}
2
document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");
-1