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

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

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

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с красивым 3D эффектом при скролле. Сегодня я покажу, как происходит создание таких крутых сайтов на реальном примере. Ключевой особенностью данного урока является реализация 3D эффекта при скролле на сайте посредством чистого CSS.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
00:47 Обзор материалов урока
01:41 Приступаем к HTML верстке сайта
03:16 Подготовка изображений для 3D сайта
06:39 HTML верстка сайта (вся разметка)
11:39 Приступаем к CSS стилизации
12:04 Подключение шрифтов CSS
12:47 Верстка слоев для 3D анимации
15:00 Верстка заголовка с размытым фоном
17:46 Слои в 3D пространстве (глубина)
29:07 Анимация растворения текста
31:53 Финальный текст и затухание
37:36 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

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

28 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@wdm Месяц назад

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

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

Не по уведомлению, а по зову сердца. Спасибо за урок

@user-kz1gz2ie7z Месяц назад

Master, Вы как всегда на высоте! Без воды, четко и по делу. Прекрасная атмосферная работа!!!!

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

Как всегда - отлично и интересно. Спасибо! Пойду пересматривать параллакс, так как задачка по этой теме нарисовалась:)

@user-rb3sw3ku6t Месяц назад

Потрясающе! И не догадывался, что такое волшебство можно создать абсолютно без js!!!! Чудеса да и только )

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

Спасибо за интересный урок! И вообще ваши уроки очень крутые.

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

Спасибо за крутой проект.

@SaSa-ei7sz 2 месяца назад

спасибо за урок!

@m1akarov442 Месяц назад

Ждал Вас , спасибо за видео! Вы очень сильный разработчик!

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

Спасибо! Супер! Очень круто!

@user-vi2fp6dl7b Месяц назад

Большое спасибо!

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

Круто!

@Rostyslav-Kinash Месяц назад

спасибо за урок

@biscvie Месяц назад

Спасибо!

@tanpii1312 Месяц назад

спасибо за урок! как всегда очень полезно😌 вот только не очень поняла, как сделать прокрутку вниз, если у страницы есть дальнейшее содержание?

@wdm Месяц назад

Здравствуйте. Здесь всё просто. Мы же задаем высоту секции в vh, где происходит анимация. То есть когда анимация завершается, фактически, мы доскроллили до конца. Это значит, что дальше будет прокручиваться весь дальнейший контент. Вам просто необходимо добавить обертку для контента, указать position: relative, при необходимости подобрать z-index и верстать последующий контент, который будет прокручиваться дальше. Если внимательно посмотреть и понять урок - когда начинается, когда заканчивается анимация, как происходит привязка к скроллу, всё встанет на свое место и ответ будет на поверхности.

@virtuoz-ru 2 месяца назад

Хорош 👍

@lvovich_biz Месяц назад

А где найти код такой: на десктопной версии на главном экране одно изображение, а когда мобильная версия, то изображение меняется на другое?

@wdm Месяц назад

Можно создать инлайновый тег style, в который загружать переменные, в зависимости от медиа запросов: :root { --background-1: url(image-regular.png) } @media (max-width: 300px) { :root { --background-1: url(image-small.png) } } И так для каждого слоя.

@lvovich_biz Месяц назад

@@wdmлучший, спасибо