Создание красивого сайта с Parallax эффектом при скролле (HTML CSS JavaScript)

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

Таймкоды:
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 Что ещё изучить?

[aleksandrmikhailov]

Автор, огромное тебе человеческое спасибо за все твои труды. По твоим видео из серии «создание сайта с нуля» 5 лет назад учился верстать и пытался найти первую работу. Сейчас я сеньор фронтенд разработчик, живу в Европе. Твои видео буквально изменили мою жизнь. Лучшей подачи и качества объяснения, чем у тебя, я пока не встречал на просторах рунета.
Вечного тебе здоровья и успехов!

[ycvcmtf]

Вау какая красотища! Наслаждение для глаз! Очень красиво оформлен сайт! Отличное видео! Спасибо за полезный урок!)

[igorsenichev]

Оооо, очередной шедевр!
Блин, так сильно нравятся твои видео!
Огромное спасибо и побольше таких шедевров!

[sergeiverenikin]

Хорошая картинка для рабочего стола🙂 Спасибо за урок!

[DenisSudarkin]

Спасибо, что существуют такие авторы на ютубе! Качественный контент, всё детально и понятно.

[weik_gamecut]

Проделал все одновременно с автором, очень воодушевило, давно не было такого хорошего заряда на изучение. Спасибо за супер подачу и интересную тему с исходниками!
Теперь есть желание попрактиковаться со своими изображениями и идеями, экспериментируя со свойствами, думаю, как и у многих после урока :)

[ankurdahiya]

thx for the project don't understand russian but still managed to complete this project by watching subtitles....great work bro i learned so many new things....try to add english captions if possible that will help people from other countries....Your content is amazing keep up the good work <3

[PlanetEarth]

Добрый день. Спасибо за Ваш вклад в образование. Знаю Вас с истоков и учился по первым урокам. Приятно что вы продолжаете делится своими знаниями. Успехов Вам во всем.

[ourguetiiyor]

Огромное Вам спасибо за уроки, сразу же купил все курсы. Материал поставлен доступно, грамотно.
Было бы приятно, по возможности, видеть как Вы работаете с комбинациями горячих клавиш сразу во время урока. Для новичков это было бы так же информативно.
Как же рад, что наткнулся на Ваш канал.

[wihumnv]

Приколдес сколько труда и внимания вложено в это видео, просто что бы поделиться знаниями. Всегда удивляли и восхищали такие люди 😌

[rbswkut]

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

[margaretdevereaux]

Спасибо огромное за Ваши труды! Как всегда тщательно отработанный и поэтому очень качественный контент!

[alexmlnkv]

Красота! Топовый контент! Никогда бы не подумал, что parallax делается так просто. Спасибо большое автору! 😊👍

[mtlvr]

Спасибо большое за урок! Я села и повторила, хоть многое пока и непонятно, но Вы вызываете огромную мотивацию изучать больше и больше, искать новые и интересные подходы и методы💖

[alexkorzh]

Очень крутая подача материала, хочется слушать и слушать) Урок ТОП 💪💪

[rhywdmw]

Это невероятно! Правда, я в восторге. Очень приятный голос. Вы понятно и подробно объясняете, очень благодарна.

[jzcduuw]

Добрый день! Спасибо за интересный урок и подробный и понятный разбор красивого Parallax-эффекта! Очень полезное видео! Успехов Вам! 👍🤝🙂

[sgzsvkb]

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

[stt]

Отличный ролик!🔥🔥🔥
Самые эффектные решения, на самом деле, под коробкой проще, чем кажутся на первый взгляд!
За фишку с will-change отдельная благодарность!
Сейчас вернулся к одному из своих пет-проектов, где было много анимаций, но иногда анимации были рваными.
В моем случае именно свойство will-change подошло как никакое другое.

[rpsgeob]

Очень круто, даже не думал что верстка бывает такого уровня, аплодисменты автору!