Использование JavaScript для настройки анимации в определенное время дня - PullRequest
Новая
       10

Использование JavaScript для настройки анимации в определенное время дня

1 голос
/ 30 марта 2019

Я пытаюсь использовать Javascript, чтобы изменить скорость перемещения div в зависимости от времени суток.

Ниже приведен код, с которым я работаю: 

<style>

.whiterose-w{
animation-duration: 0.05s;
animation-iteration-count: infinite;
position:absolute; 
}

/* BETWEEN MIDNIGHT AND MIDDAY */

.whiterose07 {
animation-name: shake2;
}

@keyframes shake2 {
    0% { transform: translate(0px); visibility: hidden; }
    1% { visibility: visible;}
    50% { transform: translate(0.7px);}
    100% { transform: translate(0px); }
}

/* BETWEEN MIDDAY AND MIDNIGHT */

.whiterose56 {
animation-name: shake5;
}

@keyframes shake5 {
    0% { transform: translate(0px); visibility: hidden; }
    1% { visibility: visible;}
    50% { transform: translate(5.6px);}
    100% { transform: translate(0px); }
}

</style>

<script>

// WHITEROSE SPEEDING UP TOWARDS MIDNIGHT !

var currentTime = new Date().getHours();

if (0 <= currentTime && currentTime < 12) {
  document.getElementsByClassName('whiterose-w').classList.add("whiterose07");
}
else if (12 <= currentTime && currentTime < 24) {
  document.getElementsByClassName('whiterose-w').classList.add("whiterose56");
}

</script>

Итакс полудня до полуночи div должен двигаться на 5.6px, а с полуночи до полудня должен двигаться на 0.7px ... но где я ошибаюсь?

...