Тёмный

Создание крутого 3D сайта с анимацией прокрутки (HTML CSS JavaScript) 

WebDesign Master
Подписаться 303 тыс.
Просмотров 125 тыс.
50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с потрясающей 3D анимацией скролла, используя возможности современного HTML, CSS и JavaScript. Мы разработаем модель движения слайдов в глубину, поработаем над кастомной анимацией, плавностью, красиво оформим композицию с помощью CSS, а также поработаем с аудио и видео контентом на странице.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
00:39 Обзор материалов урока
04:18 Подготовка к верстке сайта
05:25 Базовая HTML разметка и CSS стилизация
08:31 Подключение и настройка шрифтов
11:09 Стилизация контейнера и фреймов
13:56 Пишем движок 3D скролла на JavaScript
25:23 CSS анимация cubic-bezier
27:26 Антиалиасинг через transform-style
27:50 Верстка контента
29:46 Верстка изображений
35:18 Верстка видео (горизонтальный контент)
38:13 Умный перенос min-content
39:11 Оформление видео
41:35 Расстояние между фреймами
42:02 Верстка заголовков и текста
44:09 Верстка остального контента
48:52 Работа с аудио на странице
56:30 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

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

 

28 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 115   
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@user-kh7fv5rn1g
@user-kh7fv5rn1g 2 года назад
Вы и так для верстальщиков - номер 1‼️ и каждым новым видео, эта ступень все выше и выше! Супер!
@user-rr1ju1ck2u
@user-rr1ju1ck2u Год назад
Побольше бы, таких уроков, со сложной анимацией, скроллом и так далее. Спасибо
@user-jx8zx8uk2m
@user-jx8zx8uk2m 2 года назад
Как своевременно - только вчера видел на каком-то сайте похожий скролл внутрь и хотел узнать как это делается, и тут это замечательное видео. Спасибо!
@igorsenichev3779
@igorsenichev3779 2 года назад
Шикарный урок! 👍👏💪 Огромнейшее спасибо 🙏 Больше таких сногсшибательных уроков!!!! 😇🥳
@riticnergy7174
@riticnergy7174 Год назад
Ничего не понятно, но очень интересно, но я не оставляю попыток и пересматриваю по два, три раза. Благодарю
@FifaKisaKittens
@FifaKisaKittens 2 года назад
ООО.... Это уроки которые ЖДАЛ ВЕСЬ ЮТУБ!!!! Это те штуки, которые ты обещал 4 года назад!!! Когда говорил про следующий джедай!!! Именно этого мы ждали!!! Именно про это ты говорил, про классные крутые ништяки, которые делаются с Гренсокс!!! Алексей - ты Супер!!! Спасибо тебе друг!!! Я думаю, что только ТЫ ОДИН - ДВИЖЕШЬ РУССКИМ ВЕБМАСТЕРИНГОМ!!! Ну или процентов на 90!!!!! Мое глубочайшее убеждение.... А я могу про это рассуждать... Я с тобой уже 7 лет!!!!!!!!!!!!!!!!!!!!!!! И лучше тебя нет никого в отечественном нете!!!!
@bitrix34
@bitrix34 2 года назад
А что за гренсокс?
@FifaKisaKittens
@FifaKisaKittens 2 года назад
@@bitrix34 Библиотека анимаций ТвинМакс
@draftermyself
@draftermyself 2 года назад
Не преувеличивайте, каждый крут по своему... В этом и фишка
@FifaKisaKittens
@FifaKisaKittens 2 года назад
@@draftermyself Не будем спорить! Я озвучил свое мнение... Всем удачи в делах!!!
@Anahitacode
@Anahitacode 2 года назад
просто космос!!! Очень красиво. Спасибо за урок
@patriklovkach
@patriklovkach 2 года назад
Кто хочет чтобы с блоками frame можно было взаимодействовать, то пропишите вот этот код в блоке forEach if (opacity == 0) { setTimeout(() => { frame.style.visibility = 'collapse' }, 300) } else if(opacity == 1) { setTimeout(() => { frame.style.visibility = 'visible' }, 300) }
@enatanrouz4593
@enatanrouz4593 Год назад
Спасибо огромное )))
@user-tf4pr2lt1g
@user-tf4pr2lt1g Год назад
Чувак, ты гений, спасибо огромное
@m1akarov442
@m1akarov442 2 года назад
Спасибо Вас за Урок! Познавательно! Настоящий Необычный САЙТ!
@marsel4858
@marsel4858 2 года назад
огромное спасибо за туториал , выглядит суперски
@user-sp9nw4bd5z
@user-sp9nw4bd5z Год назад
Это очень круто! Давно искала нечто подобное, спасибо огромное за такой подробный урок!
@assalamualeykum1028
@assalamualeykum1028 2 года назад
Круто👍👍🔥. Ждём продолжения вёрстки коммерческого сайта
@refbelholodserviceminsk8410
@refbelholodserviceminsk8410 2 года назад
Cпасибо Вам огромное! Это бесценные, знания
@user-jk4fv5qm7g
@user-jk4fv5qm7g 2 года назад
Ты красавчик!! Реально круто выглядит! Спасибо тебе!)
@kirill-eremin
@kirill-eremin Год назад
Очень красиво и просто! Класс! Спасибо за урок ❤
@au7219
@au7219 2 года назад
Я сам сисадмин! Впервые понравился подача урока! Автор делай еще! Поставил лайк и подписался! Колокольчик включил!
@baiserke
@baiserke 6 месяцев назад
Такой видео-урок заслуживает 1млн просмотров
@user-yt6li5wf5m
@user-yt6li5wf5m Год назад
Благодарю за интересный и познавательный урок. Я очень благодарен.
@Obyuzer666
@Obyuzer666 2 года назад
очень круто! спасибо, открыл много нового для себя
@fain.5700
@fain.5700 2 года назад
Просто нет слов, спасибо что существуют такие туториалы
@Mistrdoro
@Mistrdoro 2 года назад
Огромное спасибо за данный урок, выглядит просто превосходно
@tractorist1
@tractorist1 2 года назад
Как всегда, лучший!
@PIXELSCYBERCAT
@PIXELSCYBERCAT 4 месяца назад
Сколько лет смотрю и только сейчас заметил что не подписан,один из самых полезных каналов для меня
@vetero4eg
@vetero4eg Год назад
Очень здорово! Спасибо за видео!
@ankurdahiya3611
@ankurdahiya3611 Год назад
i don't understand russian but still managed to complete it with subtitles...........thx for this amazing content bro
@iznaur_18
@iznaur_18 2 года назад
Подписка лайк колокольчик поделиться с друзьями никогда не думал что я когда нибудь это сделаю, но это видео того заслужило
@user-tx2ym7iq5u
@user-tx2ym7iq5u 2 года назад
Спасибо большое за видео. Я в восторге от увиденного и простоты реализации. Как я понимаю, 9 дней назад стартовал новый тренд с вёрсткой лендингов премиум класса . Даже страшно... нидай бог отключат ютуб..
@makssokolov130
@makssokolov130 10 месяцев назад
Это лучшее что я видел как и все твои видео
@StunIsLoveChik
@StunIsLoveChik 2 года назад
топ контент!! буду по ночам заниматься))
@BBRinchino
@BBRinchino 2 года назад
Самые крутые уроки. Я пользуюсь твоей темой винтерцмс
@dayvan5227
@dayvan5227 2 года назад
очень годно ,спасибо за уроки
@user-jv4px9cu3e
@user-jv4px9cu3e 2 года назад
спасибо бро!запиши ещё про пиксель перфект ролик, не бросай это дело, побольше верстки богу верстки:))
@bryatko1
@bryatko1 2 года назад
Очень круто!
@olehPagulych
@olehPagulych 2 года назад
Рідко пишу коменти, але ти того вартий, красава)
@user-so2be4rp7d
@user-so2be4rp7d Год назад
Круто!!!! Супер урок!!!
@user-cu5qy1gj3i
@user-cu5qy1gj3i 2 года назад
Шикарно!!!
@nli4605
@nli4605 2 года назад
фига так круто выглядит 👍👍👍👍
@sv9tgolden
@sv9tgolden 2 года назад
Супер!
@irynav-n6370
@irynav-n6370 Год назад
Дякую! Неймовірно красиво і зрозуміло! Підписалась, лайк і дзвіночок! 🥰
@maximganiev4048
@maximganiev4048 11 месяцев назад
красиво сделано! небольшой апгрейд движка, чтобы при скролле zVals ограничивался только фактическим числом слайдов, иначе массив растет в геометрической прогрессии и будет есть много памяти в функцию скролла перед циклом добавить zVals = zVals.slice(0, frames.length);
@FoxMindShow
@FoxMindShow 2 года назад
Смотрю Вас капец как радуете, будем делать !! Ах и еще спросить хотел, где порог ребят когда самостоятельно чтоб не повторять за кем то можно будет делать крутой проект ? А то я уже пол года в движухе знаю html, css, js basic и вот что надо чтобы самому без копипаста раскидать свой проект ?
@BaDBoY-rt2jo
@BaDBoY-rt2jo 2 года назад
Классно , спасибо
@vitaliesuruceanu9440
@vitaliesuruceanu9440 Год назад
Merci beaucoup !!!
@basketball_bro
@basketball_bro 10 месяцев назад
ты лучший бро!!!
@user-xd7vj5cf9f
@user-xd7vj5cf9f 2 года назад
супер..отличное решение
@dimkagera6955
@dimkagera6955 Год назад
Оо господи как круто ! )
@user-dp8xc9tx8n
@user-dp8xc9tx8n 9 месяцев назад
отличный урок
@saydo9003
@saydo9003 2 года назад
Ждал больше месяца) круто спасибо... я попробую сделать задний фон и что бы углубление было на заднем фоне при прокрутке
@wdm
@wdm 2 года назад
Крутая идея!)
@andrii2273
@andrii2273 Год назад
Добрый день спасибо за видос очень крутая подача побольше бы таких видео 🐻‍❄
@agilax1045
@agilax1045 Год назад
Amazing job
@marchwebTec
@marchwebTec 8 месяцев назад
you are incredible!!!!
@evgeniydubrovin
@evgeniydubrovin 2 года назад
Афигеть!
@arthurion
@arthurion 2 года назад
Это сильно.
@sweetmilk-shake4238
@sweetmilk-shake4238 2 года назад
Лучший
@user-sv1ze9gk3b
@user-sv1ze9gk3b 2 года назад
Wow!
@VictoriaSicret__0__
@VictoriaSicret__0__ 2 года назад
Привет, хотел спросить, а делаются ли сейчас сайты просто на css, html, js, php просто в редакторе, без штук по типу вордпресса или каких-то конструкторов? Только начал изучать веб и просто не понятно это немного
@ivanstolarov8179
@ivanstolarov8179 2 года назад
ааааа, красатэ
@makson7151
@makson7151 7 месяцев назад
Здравствуйте, подскажите пожалуйста, как лучше реализовать слайды с hover эффектом вместот фото и видео материалов? Буду очень благодарен за информацию
@user-cp4wf4xy1g
@user-cp4wf4xy1g Год назад
Чёртов гений
@_itechi_
@_itechi_ Год назад
Здравствуйте, у меня вопрос. Как сделать что бы не было видно текс и картинки позади текущего текста?
@Joni_Pepperoni
@Joni_Pepperoni 2 года назад
очень крутой визуал, хочется понять как в такой красоте привязать ссылки к заголовкам, а то дивы все перекрывают
@Yorukin__b
@Yorukin__b 2 года назад
Привет хотел спросить у тебя какой можно купить моник для дизайна
@Rol_ik
@Rol_ik Год назад
awesome
@luisromagua
@luisromagua Год назад
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
@user-gg1fn1yh3e
@user-gg1fn1yh3e 2 года назад
💣💣💣💣💣
@artempromo7790
@artempromo7790 2 года назад
А получится ли если добавить 3 д модели() в место фотографий , видео
@wdm
@wdm 2 года назад
Да без проблем, думаю если вставить во фреймы подготовленные 3D модели, будет очень круто смотреться.
@user-tx2ym7iq5u
@user-tx2ym7iq5u Год назад
Подскажите пожалуйста, в Вашем видео​ скролл происходит при прокрутки колесика мышки от себя, а как изменить, сделать скролл при прокрутки колесика мышки на себя? Обычно скролят вращая колёсико на себя.
@user-tx2ym7iq5u
@user-tx2ym7iq5u Год назад
Извиняюсь, что то не доглядел - скролл работает штатно, всё замечательно. Осталось понять как увеличить количество слайдов. У меня нужно показывать тридцать слайдов, а показывается только десять.
@user-tx2ym7iq5u
@user-tx2ym7iq5u Год назад
Нашел, то что искал. Что бы увеличить количество обрабатываемых слайдов слайдов требуется увеличить значение переменной --depth: 8000px;
@olegfedorov5601
@olegfedorov5601 2 года назад
Добрый день, урок супер. Интерисует лишь один вопрос, как убрать вертикальный скролинг. Открыл ваш пример но он все равно присудствует
@wdm
@wdm 2 года назад
body { scrollbar-width: none; /* Firefox */ } body::-webkit-scrollbar { display: none; /* Safari and Chrome */ }
@olegfedorov5601
@olegfedorov5601 2 года назад
@@wdm Спасибо
@begineras
@begineras 2 года назад
итс амазинг кул бро
@_-_-beast-_7207
@_-_-beast-_7207 Год назад
Очень интересный видио ролик), а как сделать чтобы скролл работал только в одном контейнере? Чтобы был контейнер который не крутится а следом этот которы с такой анимацией?
@wdm
@wdm Год назад
Попробуйте использовать GSAP ScrollTriger и стартуйте эту анимацию, когда сайт будет доскроллен до нужной секции) Или можно самостоятельно вычислить текущий отступ сверху и запустить скрипт.
@amvfromken6645
@amvfromken6645 8 месяцев назад
такой вопрос я в frame поместил ссылку, как сделать, чтобы она заработала, уже всю голову изломал z-index и обработчик события на js не помогает, может кто знает
@wdm
@wdm 8 месяцев назад
Здравствуйте. Найдите frames.forEach(function(n, i) { В перечислении let после очередной запятой добавьте pointer = zVals[i] < Math.abs(zSpacing) / 1.8 ? 'inherit' : 'none' Здесь мы определяем pointer, если за экраном, то 'none', если в поле видимости, то 'inherit' Далее нам необходимо определить pointerEvents свойство для фреймов. Нужно перез закрывающей фигурной скобкой добавить: frame.style.pointerEvents = `${pointer}` В итоге получится такая функция: frames.forEach(function(n, i) { zVals.push((i * zSpacing) + zSpacing) zVals[i] += delta * -5.5 let frame = frames[i], transform = `translateZ(${zVals[i]}px)`, opacity = zVals[i] < Math.abs(zSpacing) / 1.8 ? 1 : 0, pointer = zVals[i] < Math.abs(zSpacing) / 1.8 ? 'inherit' : 'none' frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`) frame.style.pointerEvents = `${pointer}` })
@amvfromken6645
@amvfromken6645 8 месяцев назад
спасибо, попробую, позже напишу результат@@wdm
@amvfromken6645
@amvfromken6645 8 месяцев назад
ты прям мужик😁, очень сильно выручил, от души душевно), а то я себе уже всю голову честно говоря изломал@@wdm
@Olga_Dze
@Olga_Dze Год назад
Как заказать у Вас сайт?
@user-cm6op9ev6r
@user-cm6op9ev6r Год назад
Очень круто получилось !!!
@first.cerberus8118
@first.cerberus8118 2 года назад
круто! только я очень ленивый!
@laura.hofmann
@laura.hofmann 6 месяцев назад
The tutorial is amazing! I know tried that I can klick on a play button that the video plays. Unfortunately I can't interact with video. Can you maybe help me? :)
@wdm
@wdm 6 месяцев назад
Здравствуйте. Найдите frames.forEach(function(n, i) { В перечислении let после очередной запятой добавьте pointer = zVals[i] < Math.abs(zSpacing) / 1.8 ? 'inherit' : 'none' Здесь мы определяем pointer, если за экраном, то 'none', если в поле видимости, то 'inherit' Далее нам необходимо определить pointerEvents свойство для фреймов. Нужно перез закрывающей фигурной скобкой добавить: frame.style.pointerEvents = `${pointer}` В итоге получится такая функция: frames.forEach(function(n, i) { zVals.push((i * zSpacing) + zSpacing) zVals[i] += delta * -5.5 let frame = frames[i], transform = `translateZ(${zVals[i]}px)`, opacity = zVals[i] < Math.abs(zSpacing) / 1.8 ? 1 : 0, pointer = zVals[i] < Math.abs(zSpacing) / 1.8 ? 'inherit' : 'none' frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`) frame.style.pointerEvents = `${pointer}` })
@laurahofmann3356
@laurahofmann3356 6 месяцев назад
Thank you very much - it was incredibly helpful. @@wdm
@amvfromken6645
@amvfromken6645 6 месяцев назад
Кто знает, резиновая вёрстка работает на список меню?
@wdm
@wdm 6 месяцев назад
Здравствуйте. Да без проблем. Но чаще всего, мобильное меню верстается через медиа запросы. Хотя, резиновость тоже может использоваться, зависит от кейса.
@amvfromken6645
@amvfromken6645 6 месяцев назад
@@wdm понял спасибо
@amvfromken6645
@amvfromken6645 10 месяцев назад
а что за редактор видео использован?
@wdm
@wdm 10 месяцев назад
Для подготовки видео в этом уроке и базовой цветокоррекции использовали Premiere Pro.
@goojoke3161
@goojoke3161 2 года назад
А что за тема у тебя в редакторе ?
@rplug2796
@rplug2796 2 года назад
Atom one dark вроде бы
@wdm
@wdm 2 года назад
One Dark Pro
@ilinoys3555
@ilinoys3555 2 года назад
как при такой анимации добавить рабочую кнопку? добавил в «text_right” кнопку, но она не работает
@wdm
@wdm 2 года назад
Поищите ответ в комментариях, я отвечал на подобный вопрос. Нужно поработать над свойством display, когда фрейм уходит из поля видимости (opacity).
@ilinoys3555
@ilinoys3555 2 года назад
@@wdm Нашёл, благодарю. Но не могли бы вы немного проще описать процедуру? style.display: none присваивается $frames?
@patriklovkach
@patriklovkach 2 года назад
@@ilinoys3555 if (opacity == 0) { setTimeout(() => { frame.style.display = 'none' }, 300) } else { setTimeout(() => { frame.style.display = 'flex' }, 300) } попробуй что нибудь тип такого
@patriklovkach
@patriklovkach 2 года назад
@@ilinoys3555 sorry, if (opacity == 0) { setTimeout(() => { frame.style.visibility = 'collapse' }, 300) } else if(opacity == 1) { setTimeout(() => { frame.style.visibility = 'visible' }, 300) }, этот код должен работать
@user-gr7hb2ko9m
@user-gr7hb2ko9m 2 года назад
какой механизм расчета глубины --depth ?
@user-mw7fm4ec5p
@user-mw7fm4ec5p 2 года назад
Фактически, depth - высота body, то есть - блока, который мы прокручиваем. Чем больше depth - тем дальше (глубже) мы можем скролить. Зависит от количества фреймов и расстояния между ними
@AlekseyStelz
@AlekseyStelz 2 года назад
Сколько нужно лет практики, чтоб так уверенно все реализовывать?
@wdm
@wdm 2 года назад
Вряд ли вам кто-то даст однозначный ответ на этот вопрос. Всё зависит от времени, желания, действий. В серднем - от года.
@mischaelchicago3111
@mischaelchicago3111 2 года назад
Можно за год многого добиться, а можно за 5 лет на том же месте остаться)))
@ninja-lq4df
@ninja-lq4df 2 года назад
А сколько вам лет?)
@cashflow_zz
@cashflow_zz Год назад
I love his work but can't understand Russian 😭
@moviemuz7229
@moviemuz7229 Год назад
Привет. Захожу в Ютуб пролистываю и вижу такой классный видос зашёл и сразу же подписался. Спасибо за классный видос причём полезный и нужный
Далее
Slider automático solo con CSS y HTML
3:29