Создаем лендинг на Vue 3 с анимациями! Анимация скролла и css keyframes. Фронтенд-разработка

Учимся работать с Vue 3 и делать анимации — создаем новый сайт-лендинг про путешествия, чистим проект, делаем анимацию на скролл пролетающего самолета, добавляем css animation keyframes с эффектом волны, делаем слово прозрачным. Мой Телеграм-канал о работе и о жизни -
Картинки


Анимация волны @keyframes wave 0%, 100% clip-path: polygon(0% 39%, 9% 41%, 18% 45%, 24% 50%, 31% 55%, 39% 60%, 46% 62%, 53% 62%, 62% 59%, 68% 54%, 76% 50%, 83% 49%, 90% 50%, 97% 52%, 100% 54%, 100% 100%, 0% 100%) 50% clip-path: polygon(0 49%, 5% 53%, 11% 57%, 16% 59%, 28% 64%, 38% 57%, 41% 58%, 48% 56%, 54% 58%, 64% 62%, 71% 66%, 79% 68%, 86% 66%, 92% 64%, 100% 62%, 100% 100%, 0% 100%) Содержание 00:00:00 Вступление 00:01:07 Смотрим анимации для 1 и 2 экрана 00:01:34 Создаем пустой проект на Vue 3 00:02:56 Чистим проект от лишнего и настраиваем под себя 00:08:14 Верстаем слой с пролетающим самолетом и фоны 00:19:01 Создаем javascript анимацию на скролл 00:22:06 Создаем прозрачную надпись 00:25:46 Делаем анимацию волны через css keyframes 00:32:00 Смотрим анимацию для следующего раза 00:32:17 Заключение Официальный сайт Vue —