Создание красивого сайта на HTML, CSS и JavaScript (CSS-анимация, Blur, Parallax, Gradient)

В этом уроке мы рассмотрим создание сайта с css эффектами и анимацией. Сайт будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом размытия.

Таймкоды:
00:00 Начало урока
01:02 Подготовка к верстке
02:00 Базовая HTML-разметка
02:54 Инициализация JS-библиотеки
03:26 CSS-стилизация страницы
04:07 Подключение шрифта CSS
04:46 Общие стили документа html, body
05:26 Размер шрифта в зависимости от экрана
06:58 Первые параметры JS-библиотеки
07:52 Адаптивный слайдер
08:58 Наклон блока CSS rotate
10:11 Прокрутка блока на скролл и анимация
11:21 Анимация cubic-bezier
12:53 Верстка изображений с Parallax эффектом
15:54 Оптимизация CSS анимации с помощью will-change
17:15 Настройка глубины Parallax эффекта
17:51 Синхронизация двух слайдеров
20:23 Насыщенность через CSS и Blur эффект
22:33 Анимация открытия и закрытия
26:06 Верстка текста адаптивного размера
28:21 Градиент текста с помощью CSS
29:27 Триггер для анимации текста при скролле
31:34 Анимация скрытия текстового блока
33:48 Что ещё изучить?

[timchosen]

Невероятно красиво. Я третий раз перематываю в начало, чтобы кайфануть с того, как эти картинки плавно двигаются) Респект за проделанную работу!

[vatasi]

Капец, ваш дизайн это нечто, мне кажется даже люди которые ни как не связаны с вёрсткой и вообще it, просто увидев заставку нажмут на видео и посмотрят. Это как видео про очистку водоема хахах )... Кто смотрел тот поймет)))

[ifvudrx]

Действительно, некоторых фишек не знал! Очень профессионально и быстро верстаешь)

[berlngo]

Галерея действительно потрясающая… спасибо тебе огромное! Человечище!!

[jscripts]

Как же круто) Спасибо что создаешь такие уроки, для начинающих это важно ооочень!

[khfvrng]

Шикарная галерея! огромное спасибо за такой интересный урок!

[spnwbdz]

Смотреть одно удовольствие! Результат выглядит очень эффектно

[dolbolesya]

Я начал учиться в сфере ИТ 5 лет назад, сейчас решил определится со сферой и попробовать веб, не фронт, а бек на асп.нет, но все равно мне очень понравился ролик. Очень приятный голос и подача, объясняется каждое действие и почему именно такое решение. Это идеально

[elevkoy]

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

[jascherkagri]

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

[muradishmurodov]

Спасибо большое. Очень понятный и красивый туториал

[genshinfros]

Вышло ну ооочень классно и красиво 🔥🔥🔥 Сегодня попробую тоже такое сделать)) Делайте побольше таких прикольных штучек 😉

[alexmckaley]

афигеннейший урок, спасибо от всех верстальщиков. 🙏🏻

[alsi_k]

Это огромный опыт, полезнейшие знания, с меня лай и коммент, спасибо огромное!

[wqgcrjw]

Крутой ты мужик. Когда-нибудь я возьму отпуск и проделаю все твои уроки.

[Uuksxxs]

Спасибо! Очень полезный и ёмкий урок - грех не повторить все действия за автором, практики ради☺🤓

[antonmolchanov]

Вау, это очень красиво и интересно! Обязательно попробую сегодня сделать

[Vokivorob]

Хоть и слишком много различных нюансов, да и js всё ещё кажется непонятным для меня как новичка, но такое действительно стоит попробовать, выглядит нереально круто💪. Спасибо автор! Пока только парочку фишек приметил для себя, надеюсь пригодятся в дипломной)

[unknownWakeborder]

Коммент в поддержку)
Прикольный материал, спасибо!

[black_bird_guitar]

Крутая идея но не хватает скрола на начало слайда в конце + что бы при нажатии на карточку нельзя было открыть другую . Лайк