87 Views· 04/27/24· People & Blogs
Создание красивого сайта с Parallax эффектом при скролле (HTML CSS JavaScript)
Все курсы в одном комплекте: https://wd-m.ru/bundle
Создание сайта от А до Я: https://goo.gl/ankxq9
В этом уроке мы рассмотрим создание красивого сайта с Parallax эффектом при скролле. Сегодня я покажу, как происходит разработка таких крутых сайтов и подробно объясню каждый шаг. Ключевой особенностью данного примера является, конечно-же, реализация эффекта Parallax на сайте. Вы удивитесь, насколько просто и быстро можно делать подобные вещи, используя современный CSS.
Страница урока: https://webdesign-master.ru/bl....og/html-css/parallax
Таймкоды:
00:00 Начало урока
01:57 Обзор материалов урока
02:49 Подготовка изображений для Parallax эффекта в CSS
11:28 Приступаем к HTML верстке сайта
13:49 Подключаем файлы CSS и JavaScript
14:55 HTML верстка сайта (вся разметка)
19:54 Приступаем к CSS стилизации
21:02 Подключение шрифтов CSS
22:50 Стилизация тега body
23:58 Верстка шапки сайта - стили parallax слоев
26:21 Параллакс-эффект с помощью JavaScript
31:11 Логика движения слоев Parallax в CSS
36:39 Верстка заголовков сайта и эффект «свечения»
45:32 Полоса между блоками - решение
50:04 CSS стилизация первой секции сайта
56:32 Создание параллакс эффекта у контента
59:09 Плавная прокрутка страницы JS
1:04:41 Анимация Cubic Bezier для Parallax эффекта в CSS
1:11:00 Что ещё изучить?
ВКонтакте: https://vk.com/jediweb
Телеграм: https://t.me/jediweb
Дзен: https://dzen.ru/jediweb
0 Comments