Разбираем анимацию на этой gif. Невооружённым глазом можно заметить что луна и солнце сменяют друг друга вращаясь. Но как? Дело в том, что два элемента svg помещены в контейнер. И вращается собственно сам контейнер. При наведении на 180 градусов и когда курсор вне - тоже на 180. Давайте подробнее рассмотрим как работает js (ссылку на весь код прикреплю ниже): 1. Сначала проверяем что у нас день или ночь. Показываем солнце/луну. 2. Далее на основной контейнер вешаем два прослушивателя событий по наведении и когда курсор вне элемента. После каждого инициализируем начальное состояние день/ночь. Пример на кодепен. Надеюсь вам также интересно как и мне. 😉
Разбираем анимацию на этой gif.
Невооружённым глазом можно заметить что луна и солнце сменяют друг друга вращаясь. Но как?
Дело в том, что два элемента svg помещены в контейнер. И вращается собственно сам контейнер. При наведении на 180 градусов и когда курсор вне - тоже на 180.
Давайте подробнее рассмотрим как работает js (ссылку на весь код прикреплю ниже):
1. Сначала проверяем что у нас день или ночь. Показываем солнце/луну.
2. Далее на основной контейнер вешаем два прослушивателя событий по наведении и когда курсор вне элемента. После каждого инициализируем начальное состояние день/ночь.
Надеюсь вам также интересно как и мне. 😉