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

Подписаться 303 тыс.

Просмотров 734 тыс.

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание красивого сайта с Parallax эффектом при скролле. Сегодня я покажу, как происходит разработка таких крутых сайтов и подробно объясню каждый шаг. Ключевой особенностью данного примера является, конечно-же, реализация эффекта Parallax на сайте. Вы удивитесь, насколько просто и быстро можно делать подобные вещи, используя современный CSS.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
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 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

10 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 254

@wdm 2 месяца назад

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

@aleksandrmikhailov3255 Год назад

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

@maxnospot 8 месяцев назад

Нужно задонатить учителю :)

@alexvingison5659 8 месяцев назад

Привет, можешь дать совет, стоит ли вообще начинать это изучать? Есть большое желание, для меня это интересно, но я боюсь конкуренции огромной, плюс сейчас активно развивается ИИ, да так, что скоро сможет легко джунов заменить. По твоим ощущениям сейчас it рынок перенасыщен или ещё есть шанс начать изучать и влится спустя какое-то время? Заранее спасибо

@wdm 8 месяцев назад

@@alexvingison5659 самый большой барьер в вашем росте - это страх. Страх оказаться ненужным на рынке. Это изначально неправильный подход. Я с 2005 года занимаюсь веб-разработкой и видел все страхи джунов. 2005-2010 - это сложно, а платят не так много, плюс как то несерьёзно. 2010-2015 - веб разработка умрет и я окажусь не нужен. 2015-2021 - на рынке огромная конкуренция, я окажусь не нужен. 2021-… - нас заменит ИИ и я окажусь не нужен. Главное, о чем стоит думать - это одна простая истина. Стремление стать лучшим в области - важнейшая вещь, которая должна вас беспокоить. Не все 100% начинающих становятся успешными. И это хорошо. Пока так, стать лучшим достаточно просто. Наступят времена, когда лучших станет гораздо больше.

@kostukov75 Год назад

Дай Боженька тебе здоровья, святой 😇 ты человек.

@user-pt5mp7pm6q Год назад

Аминь🙏

@user-ty6lf4lm4n 10 дней назад

😊х😊х@@user-pt5mp7pm6q

@user-ty6lf4lm4n 10 дней назад

😁

@user-yc2vc6mt1f Год назад

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

@igorsenichev3779 Год назад

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

@user-wi1hu8mn3v 6 месяцев назад

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

@PlanetEarth1984 Год назад

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

@sergeiverenikin3275 Год назад

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

@ourguetiiyor8983 Год назад

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

@weik_gamecut Год назад

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

@DenisSudarkin Год назад

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

@overyx Год назад

*Посмотрел урок от начала до конца в час ночи, при условии того, что никогда не делал проекты на HTML/CSS, и даже JavaScript не знаю...* *В общем, подача автора на высочайшем уровне, было максимально интересно. Без преувеличений*

@ankurdahiya3611 Год назад

thx for the project bro.....i 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

@manassehh Год назад

Me too!! It's explained better than anything I've followed in my native language or english hahaha

@user-rb3sw3ku6t Год назад

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

@alexkorzh8961 Год назад

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

@margaretdevereaux8254 Год назад

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

@user-rh1yw3dm9w Год назад

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

@mtlvr 11 месяцев назад

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

@thepencilmationlive4771 10 месяцев назад

Я в шоке говоришь четко без слов паразитов и мычания, блин ты гений))

@fordjl9811 Год назад

Ютубу спасибо за такую рекомендацию!! Увидев впервые я просто офигел какие крутые вещи делает автор!!

@user-cu1nu4qi5e 9 месяцев назад

это просто лучший канал с которым я сталкивалась.

@alexmlnkv Год назад

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

@beefamilyteam Год назад

Не знаю, как я зашел на это видео, но залип на час...и не пожалел потраченного времени)

@user-jz5cd5uu8w Год назад

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

@alex-kobrin 10 месяцев назад

Это второй урок на канале , который меня заинтересовал . Спасибо за ваш труд

@user-rp7sg6eo4b Год назад

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

@user-sg7zs1vk5b Год назад

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

@user-ft2iu4uc2d Год назад

Автор, огромное тебе человеческое спасибо! Я после просмотра стал супер межгалактическим сеньором фронтэндом теперь работаю в соседней звездной системе. Ты изменил мою жизнь. Лучшей подачи материалов я не встречал в этой части вселенной.

@Shade063 7 месяцев назад

Просто огромный труд, такие произведения исскуства создавать 🔥❤

@sergeytukhtarov1175 Год назад

Алексей, Благодарю тебя за твой труд. Прям чувствую, как ты вкладываешь частичку своей Души в каждый свой урок. Желаю успехов тебе и твоему каналу ❤.

@dzmitryrabinkin Год назад

Последний раз включал твои видео лет 7 назад. Конечно за это время сильно видно развитие. Круто :)

@MikhailEshchenko Год назад

Спасибо! Это один из лучших уроков на канале!

@invoker7904 Год назад

Супер прекрасно, восхитительно, невероятно Спасибо!!! Как уровень в крутой игре выглядит

@user-rk3bi6sy9e Год назад

Шедеврально, просто нет слов. Молодчина.

@kotlancer Год назад

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

@triamera977 Год назад

Алексей, спасибо за ваши труды! Я как и многие тут начинали с ваших уроков, до сих пор работаю с ModX, полюбил его ))

@romovajulia 6 месяцев назад

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

@unprogrammer-px2ul Год назад

Супер урок, столько всего интересного и нового для себя узнал, хоть и совсем начинающий в этом деле, было безумно интересно сделать это👍👍👍

@RussiaUpgradeCar Год назад

Подписка брат, от души хороший урок, делай ещё больше таких уроков, по сути я нечего не знаю, но слушаю как объясняет все учится быстро 💨

@Aleksandra77779 Год назад

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

@stt1632 Год назад

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

@user-pe1ku7cp2y Год назад

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

@MrSlavjon Год назад

как всегда на высоте! GSAP в правильной дозировке очень даже круто)

@maximroslow Год назад

Звук и подача очень классная, хороший урок

@Arifox25 6 месяцев назад

Не могу выразить всю благодарность ,автор лучший❤

@seleritas Год назад

Отличный урок! Как всегда на высоте!

@evgagarina_art Год назад

Это самый красивый урок, который я видела!😍 всё супер подробно, спасибо!)

@user-greywolf Год назад

Тема сайта обалденная! Сразу хочется что-то подобное забацать!

@Bagxfmusic 10 месяцев назад

я просто поражаюсь от таких видео, ты гений, ты просто гений.

@furious9398 Год назад

Понятно и легко. Никогда не думал, что за час потраченного времени можно столько усвоить.

@user-fe1bw3ve2h Год назад

Спасибо за урок, очень познавательно! С меня подписка!👍🏼

@front_praxis Год назад

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

@fritz3213 Год назад

Бро ты топ! Лучший контент в рунете по теме веб-разработки

@user-jb3cd5uk2j Год назад

Как всегда на высоте!!!! Красота

@degenerallissimus Год назад

Автор кудесник! Потрясающая подача материала от потрясающего специалиста. Так и не скажешь, что 250к подписчиков

@user-uv3fz6gw2e Год назад

Супер, посмотрел на одном дыхании!

@promanplayer8064 Год назад

Благодарю, огромное тебе спасибо, этот гайд был полезен для человека который НК писал ранее на HTML, а работал над созданием UI

@cmyo-un4tu Год назад

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

@alejandropros8174 11 месяцев назад

Just a great tutorial wich every step, explained concise, and even giving wisefull advises about performances and files. I'll follow u even I need the translate in english. I hope u make more content like these. U deserve all the likes.

@sabirsafiullin5304 Год назад

Это что за эффекты такие 😱 просто лучший👋🔥🙌

@user-md5rm3uj5o Год назад

Я не занимаюсь HTML CSS JavaScript но это круто, поэтому лайк

@TheLemutant Год назад

Огромное спасибо. Классный урок!

@Upgrowth-em5dx 4 месяца назад

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

@cryfos Год назад

невероятный дизайн

@tezis.digital Год назад

Крутой видос и дизайн! обязательно весь пройду, это большой + к портфолио

@HugoBossKosta Год назад

очень крутые уроки, так же купил твои курсы, так как они топ!

@dovuret2191 Год назад

Это просто красиво!!! Я взял код, и поменял значения, кое что добавил, и ето всё сделал фоном под обыный сатй спасибо!

@anikamartclair3026 Год назад

Очень круто) такая красота😍😍😍

@user-mi9hg3ou9v Год назад

Замечательный урок, спасибо!

@jamiljafarov7570 Год назад

Просто лучший) потрясающий контент)

@maratov2502 Год назад

Очень интересно и полезно, круто получилось 👍👍👍

@VolodymyrSirenko Год назад

Огромное спасибо! Я, как начинающий фронтендразработчик, просто в восторге!

@VolodymyrSirenko Год назад

Хочу купить ваш бандл с курсами. Я из Украины. это возможно?

@wdm Год назад

Здравствуйте. Напишите на почту courses@webdesign-master.ru

@VIJana79 Год назад

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

@user-rl5od9qv1c 5 месяцев назад

Очень хороший материал!

@user-pd9gl3pt1u Год назад

Воу воу, как же круто)

@mew6085 Год назад

Блин, показывает пипедку, думаю вот блин где он ее взял. И он такой говорит где, я такой, капецц ты чудо! И так каждые 10 минут в видосе. Вроде кажется что нафиг эти мелочи рассказывать, но скажу от себя это капец как приятно. Просто топовый урок!

@AVP77 Год назад

Как всегда круто!

@user-rl1ec3co7n Год назад

Очень круто! Очень информативные уроки! Западные кодеры отдыхают!

@nazaroleksyn2973 Год назад

Подивився це відео і захотів займатись цим дуже все красиво росказуєш і розумно!!!

@user-ve8ux5yy7y 10 месяцев назад

Офигенски. Спасибо большое!

@DevALine Год назад

Спасибо, за контент! Ты Лучший!

@master8920 Год назад

Ещё не досмотрел до конца и уже один совет подчеркнул, в разделе роботы с изменением. Совет что не нужно при вырезке уменьшать вырезанные фрагменты по их максимальной высоте. Да бы потом не морочить голову с позиционированием. Спасибо урок я думаю ещё не раз меня порадует классными советами. Удачи каналу!

@denistverdokhlebov3059 Год назад

Спасибо, друг! Лучший!

@investWhale Год назад

Так давно не видел видео на этом канале. И вот новое видео, а качество запредельно. Очень нравилась тематика по дизайну и методика разработки качественных сайтов.