Создаем анимацию текста на css keyframes и Intersection Observer. Фронтенд-разработка

Показать описание

Учимся делать анимации — делаем css анимацию текста на наведение мыши, добавляем css animation keyframes, добавляем отслеживание попадания элемента в зону видимости с помощью браузерного API Intersection Observer.

Картинка заднего плана, если захотите делать не белый фон

Полигоны-прямоугольники для обрезки текста
&.first
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)
&.second
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%)

Содержание
00:00:00 Вступление
00:00:31 Работа анимации
00:01:33 Верстка
00:11:31 Поведение на ховер
00:13:22 Анимация
00:17:20 Intersection observer
00:24:36 Заключение