Создание сайта с красивой анимацией фона (HTML CSS JavaScript)

В этом уроке мы рассмотрим создание сайта с красивым эффектом при скролле. Сегодня я покажу, как происходит создание таких красивых сайтов и на реальном примере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация синхронной анимации посредством использования библиотеки GSAP.

Таймкоды:
00:00 Начало урока
01:10 Обзор материалов урока
02:16 Приступаем к созданию сайта
04:14 HTML верстка слайдера
08:20 Приступаем к CSS стилизации
09:04 Подключаем слайдер в JS
09:46 Определяем параметры слайдера
10:27 Верстка элементов управления Swiper
13:13 CSS стилизация слайдов
19:38 Адаптивная верстка заголовка
22:28 Декоративный элемент заголовка
24:09 Оформление подзаголовка
25:41 Верстка кнопки на сайте
28:50 Стилизация элементов управления
30:10 Подготовка анимации на сайте
34:46 Синхронизация анимации со слайдами
42:15 Тип анимации через GSAP Power
43:15 Дополнительная анимация
49:06 Элементы интерфейса на сайте
49:34 Что еще изучить?

[Danze_lite]

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

[GEELSRC]

Это мой лучший канал по фронтенду, сам бекендер но с удовольствием смотрю видео с этого канала, автору респект !

[anoncatod]

Автор, Вы просто золотой самородок среди серости в Ютубе! Спасибо Вам большое за уроки и за курсы!

[seal]

Обожаю этот канал ! Не пожалел, что взял курсы! Всё изложено четко без воды. Ставит мощную базу💪

[scomfcb]

Огромное спасибо за такой контент, где реально показывают как работать с анимацией!!! Благодарю

[oopssorry.]

Мужик, ты реально мегамозг!
Все доходчиво, интересно, с объяснениями.
Очень благодарен тебе, просто лучший!

[ESCOOBAAR]

Очень приятно слушать, респект за твои работы!

[oxszbuh]

Абалденно🤩🤩🤩 У тебя очень классные видео особенно для самообучения и практики

[Barsi.]

Респект ! Так классно все объясняет и показывает!

[edqrdhe]

Купил курс, решил поддержать тебя, спасибо за твои старания)

[AlisherNasimov]

Добрый день. Только зашел на Ваш канал. Это что то нереальное! я вначале пути только, начал верстку сайта на Тильде. Сейчас просматриваю figma.. Наткнулся на Ваши видео... Наверное начну учить CSS HTML.. Крутые вещи Вы делаете. От души желаю удачи!

[YutaLoo]

Очень круто, все объясняется, просто шикарно. А как после скрола добавить ещё

[MicroDobb]

очень интересный урок. никогда бы не подумал что так можно. Автор, еще очень интересна тема спрайтов для веб-приложений. Может когда-нибудь у Вас появится время это объяснить по человечески) Спасибо

[xyervkr]

Подскажите, пожалуйста, название темы для ОС

[batskalevich]

Подскажите, есть ли какие-то решения, если на фон нужно вставить видео с альфа-каналом, чтобы была возможность работать с бэкграундом?

[YutaLoo]

А можете, красивый профиль показать как сделать)

[tor]

Ой, мама дорогайааа... Что ты со мной

[vovan]

Какое расширение он использует для того чтоб работал swiper ???? Помогите пожалуйста

[ava_crey]

Можете помочь, мне в терминале пишет Error opening input: No such file or directory
Error opening input file background-60.mp4.
Error opening input files: No such file or directory, когда я вставляю команду которая есть в папке, как решить?