Создание красивого сайта с Parallax анимацией заголовка (HTML+CSS)

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

Таймкоды:
00:00 Начало урока
01:10 Материалы урока
02:02 Создание файлов проекта
02:58 Подключение файлов к сайту
04:13 Подготовка изображений
04:50 Подготовка слоёв для сайта
08:23 Подключение библиотек
09:47 Техническая HTML разметка
11:21 Приступаем к HTML вёрстке
12:27 Базовая стилизация CSS
13:11 Пипетка для работы с цветом
13:58 Стилизация html, body
14:30 Подготовка к запуску проекта
15:23 Запускаем живой сервер
15:53 Инициализация библиотеки Swiper
17:10 Настройка параметров слайдера
18:08 Настройка скролла мышью
12:28 Вертикальная ориентация Swiper
19:32 Разделяем работу на части
20:29 Создание слайдера изображений
24:21 Настройка скорости перелистывания
24:49 Добавляем Parallax эффект
26:45 Правила создания Параллакс эффекта
28:24 Наполняем остальные слайды контентом
29:01 Исправляем наплыв слайдов
29:50 Добавляем объёмный 3D эффект
35:02 Приступаем к созданию интерфейса UI
36:01 Настройка контейнера для UI
37:24 Планируем сетку Grid на сайте
38:11 Создание верхей линии top-line
38:28 Раработка сетки для сайта
43:20 Подключение шрифтов на сайт
46:58 Проверка подключения шрифтов
47:20 Вёрстка лого, кнопки и меню
50:53 Определение переменных CSS
51:49 Что такое сайт-выворотка
52:58 Вёрстка кнопки (button)
55:01 Доработка сетки (Grid)
1:04:37 CSS стилизация кнопки
1:08:11 Стилизация красивого меню
1:13:41 Кнопка меню с анимацией
1:17:41 Выбор анимации у кнопки
1:18:49 Вёрстка контентной части
1:23:28 Адаптивный заголовок
1:25:01 Стилизация подзаголовка
1:27:15 Разбиваем буквы на части (JS)
1:28:35 CSS стилизация букв
1:31:52 Создание анимации букв
1:41:29 Анимация подзаголовка
1:44:07 CSS Модификатор для кнопки
1:45:36 Touch на мобильных (CSS)
1:48:04 Что ещё изучить?

[pvbkmmh]

Дружище, ты наверное самый крутой и лучший на просторах Ютуба, спасибо тебе за твои труды) 🫶👍

[anoncatod]

то чувство, когда видишь новый видос от этого автора и ставишь лайк не глядя, зная, что контент априори будет супер полезный и качественный. Спасибо за классный урок!

[luksik]

Идем смотреть и повторять ! Спасибо за удовольствие

[annin]

Крутой видос. Балдежный сайт. Как всегда все делаешь на высшем уровне. Лев тигр. Смотрю твои видосы с кайфом бро.

[euginekholmogorov]

Вау Алексей) спасибо за очередное полезное видео, низкий поклон 😊

[ueeurrt]

Спасибо за такие крутые видео. Пожалуйста делай побольше таких видео

[NtDrke]

Спасибо за урок! Расскажи для начинающих про библиотеку GSAP

[danorkalled]

Огромное спасибо за видео. Как всегда, все выполнено на высоте. Лайк уже ставлю не глядя =)

[ewqgljl]

Как всегда видео топ)) Спасибо автору!!!
Хотелось бы увидеть использование таких библиотек, как GSAP или anime.js

[valgerofficial]

Очень красивая работа! Спасибо большое. Алексей, подскажите какую тему в Windows вы используете?

[aleksshyzovskiy]

Хочу отметить очень красивый внешний вид проводника
Это что-то кастомное или как достичь таких цветов/отступов между файлами/эффектов выделения? Или, возможно, на канале есть видео об этом, которое я не нашёл?

[alexflatiz]

где находить такие сочные изображения для бэкграунда?

[RomanB-odqn]

Как сделать плавные настройки при написании текста в vs code, как у тебя ?)

[ikbxibe]

приветсвую подскажи а что за теб нажать нужно и что нужно скачать чтоб начать делать сайт благодарю

[metaxx]

Подскажите пожалуйста, что за тема для VSCode используется в ролике

[evolution_]

вау четко))), скажите можно ли реализовать идею скрола по бесконечному видео на странице сайта

[peterparf]

Здравствуйте, вы как то делали ролик по сборки ПК для веб дизайна, но этого видео я не нашел на канале.. У меня такой вопрос, вы там монитор рекомендовали 4к от LG, я бы хотел узнать модель)