Создание крутого 3D сайта с анимацией прокрутки (HTML CSS JavaScript)
Вставка
- Опубліковано 27 чер 2024
- Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: wd-m.ru/createsite
В этом уроке мы рассмотрим создание сайта с потрясающей 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
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
Побольше бы, таких уроков, со сложной анимацией, скроллом и так далее. Спасибо
Как своевременно - только вчера видел на каком-то сайте похожий скролл внутрь и хотел узнать как это делается, и тут это замечательное видео. Спасибо!
Шикарный урок! 👍👏💪
Огромнейшее спасибо 🙏
Больше таких сногсшибательных уроков!!!! 😇🥳
Вы и так для верстальщиков - номер 1‼️ и каждым новым видео, эта ступень все выше и выше! Супер!
просто космос!!! Очень красиво. Спасибо за урок
Круто👍👍🔥. Ждём продолжения вёрстки коммерческого сайта
Ничего не понятно, но очень интересно, но я не оставляю попыток и пересматриваю по два, три раза. Благодарю
Я сам сисадмин! Впервые понравился подача урока! Автор делай еще!
Поставил лайк и подписался! Колокольчик включил!
огромное спасибо за туториал , выглядит суперски
Это очень круто! Давно искала нечто подобное, спасибо огромное за такой подробный урок!
Очень красиво и просто! Класс! Спасибо за урок ❤
Спасибо Вас за Урок! Познавательно! Настоящий Необычный САЙТ!
Ты красавчик!! Реально круто выглядит! Спасибо тебе!)
Просто нет слов, спасибо что существуют такие туториалы
Как всегда, лучший!
Cпасибо Вам огромное! Это бесценные, знания
очень круто! спасибо, открыл много нового для себя
Благодарю за интересный и познавательный урок. Я очень благодарен.
Очень здорово! Спасибо за видео!
топ контент!! буду по ночам заниматься))
Огромное спасибо за данный урок, выглядит просто превосходно
Это лучшее что я видел как и все твои видео
ООО.... Это уроки которые ЖДАЛ ВЕСЬ ЮТУБ!!!! Это те штуки, которые ты обещал 4 года назад!!! Когда говорил про следующий джедай!!! Именно этого мы ждали!!! Именно про это ты говорил, про классные крутые ништяки, которые делаются с Гренсокс!!!
Алексей - ты Супер!!! Спасибо тебе друг!!! Я думаю, что только ТЫ ОДИН - ДВИЖЕШЬ РУССКИМ ВЕБМАСТЕРИНГОМ!!! Ну или процентов на 90!!!!! Мое глубочайшее убеждение.... А я могу про это рассуждать... Я с тобой уже 7 лет!!!!!!!!!!!!!!!!!!!!!!!
И лучше тебя нет никого в отечественном нете!!!!
А что за гренсокс?
@@bitrix34 Библиотека анимаций ТвинМакс
Не преувеличивайте, каждый крут по своему... В этом и фишка
@@draftermyself Не будем спорить! Я озвучил свое мнение... Всем удачи в делах!!!
Очень круто!
очень годно ,спасибо за уроки
Рідко пишу коменти, але ти того вартий, красава)
Шикарно!!!
Круто!!!! Супер урок!!!
спасибо бро!запиши ещё про пиксель перфект ролик, не бросай это дело, побольше верстки богу верстки:))
Сколько лет смотрю и только сейчас заметил что не подписан,один из самых полезных каналов для меня
Подписка лайк колокольчик поделиться с друзьями
никогда не думал что я когда нибудь это сделаю, но это видео того заслужило
Самые крутые уроки. Я пользуюсь твоей темой винтерцмс
i don't understand russian but still managed to complete it with subtitles...........thx for this amazing content bro
Такой видео-урок заслуживает 1млн просмотров
Кто хочет чтобы с блоками frame можно было взаимодействовать, то пропишите вот этот код в блоке forEach
if (opacity == 0) {
setTimeout(() => {
frame.style.visibility = 'collapse'
}, 300)
} else if(opacity == 1) {
setTimeout(() => {
frame.style.visibility = 'visible'
}, 300)
}
Спасибо огромное )))
Чувак, ты гений, спасибо огромное
Супер!
Спасибо большое за видео. Я в восторге от увиденного и простоты реализации. Как я понимаю, 9 дней назад стартовал новый тренд с вёрсткой лендингов премиум класса . Даже страшно... нидай бог отключат ютуб..
фига так круто выглядит 👍👍👍👍
Дякую! Неймовірно красиво і зрозуміло! Підписалась, лайк і дзвіночок! 🥰
Оо господи как круто ! )
Классно , спасибо
ты лучший бро!!!
Amazing job
супер..отличное решение
Merci beaucoup !!!
отличный урок
Смотрю Вас капец как радуете, будем делать !! Ах и еще спросить хотел, где порог ребят когда самостоятельно чтоб не повторять за кем то можно будет делать крутой проект ? А то я уже пол года в движухе знаю html, css, js basic и вот что надо чтобы самому без копипаста раскидать свой проект ?
Добрый день спасибо за видос очень крутая подача побольше бы таких видео 🐻❄
you are incredible!!!!
Афигеть!
ааааа, красатэ
Ждал больше месяца) круто спасибо... я попробую сделать задний фон и что бы углубление было на заднем фоне при прокрутке
Крутая идея!)
красиво сделано! небольшой апгрейд движка, чтобы при скролле zVals ограничивался только фактическим числом слайдов, иначе массив растет в геометрической прогрессии и будет есть много памяти
в функцию скролла перед циклом добавить zVals = zVals.slice(0, frames.length);
Лучший
Это сильно.
Wow!
Чёртов гений
очень крутой визуал, хочется понять как в такой красоте привязать ссылки к заголовкам, а то дивы все перекрывают
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
awesome
Привет, хотел спросить, а делаются ли сейчас сайты просто на css, html, js, php просто в редакторе, без штук по типу вордпресса или каких-то конструкторов?
Только начал изучать веб и просто не понятно это немного
💣💣💣💣💣
Привет хотел спросить у тебя какой можно купить моник для дизайна
Здравствуйте, у меня вопрос. Как сделать что бы не было видно текс и картинки позади текущего текста?
Здравствуйте, подскажите пожалуйста, как лучше реализовать слайды с hover эффектом вместот фото и видео материалов? Буду очень благодарен за информацию
А получится ли если добавить 3 д модели() в место фотографий , видео
Да без проблем, думаю если вставить во фреймы подготовленные 3D модели, будет очень круто смотреться.
итс амазинг кул бро
Как заказать у Вас сайт?
Подскажите пожалуйста, в Вашем видео скролл происходит при прокрутки колесика мышки от себя, а как изменить, сделать скролл при прокрутки колесика мышки на себя? Обычно скролят вращая колёсико на себя.
Извиняюсь, что то не доглядел - скролл работает штатно, всё замечательно. Осталось понять как увеличить количество слайдов. У меня нужно показывать тридцать слайдов, а показывается только десять.
Нашел, то что искал. Что бы увеличить количество обрабатываемых слайдов слайдов требуется увеличить значение переменной --depth: 8000px;
а что за редактор видео использован?
Для подготовки видео в этом уроке и базовой цветокоррекции использовали Premiere Pro.
Добрый день, урок супер. Интерисует лишь один вопрос, как убрать вертикальный скролинг. Открыл ваш пример но он все равно присудствует
body {
scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
@@wdm Спасибо
Кто знает, резиновая вёрстка работает на список меню?
Здравствуйте. Да без проблем. Но чаще всего, мобильное меню верстается через медиа запросы. Хотя, резиновость тоже может использоваться, зависит от кейса.
@@wdm понял спасибо
Очень круто получилось !!!
круто! только я очень ленивый!
Очень интересный видио ролик), а как сделать чтобы скролл работал только в одном контейнере? Чтобы был контейнер который не крутится а следом этот которы с такой анимацией?
Попробуйте использовать GSAP ScrollTriger и стартуйте эту анимацию, когда сайт будет доскроллен до нужной секции) Или можно самостоятельно вычислить текущий отступ сверху и запустить скрипт.
такой вопрос я в frame поместил ссылку, как сделать, чтобы она заработала, уже всю голову изломал z-index и обработчик события на js не помогает, может кто знает
Здравствуйте.
Найдите 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}`
})
спасибо, попробую, позже напишу результат@@wdm
ты прям мужик😁, очень сильно выручил, от души душевно), а то я себе уже всю голову честно говоря изломал@@wdm
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? :)
Здравствуйте.
Найдите 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}`
})
Thank you very much - it was incredibly helpful. @@wdm
А что за тема у тебя в редакторе ?
Atom one dark вроде бы
One Dark Pro
как при такой анимации добавить рабочую кнопку? добавил в «text_right” кнопку, но она не работает
Поищите ответ в комментариях, я отвечал на подобный вопрос. Нужно поработать над свойством display, когда фрейм уходит из поля видимости (opacity).
@@wdm Нашёл, благодарю. Но не могли бы вы немного проще описать процедуру? style.display: none присваивается $frames?
@@ilinoys3555 if (opacity == 0) {
setTimeout(() => {
frame.style.display = 'none'
}, 300)
} else {
setTimeout(() => {
frame.style.display = 'flex'
}, 300)
}
попробуй что нибудь тип такого
@@ilinoys3555 sorry, if (opacity == 0) {
setTimeout(() => {
frame.style.visibility = 'collapse'
}, 300)
} else if(opacity == 1) {
setTimeout(() => {
frame.style.visibility = 'visible'
}, 300)
},
этот код должен работать
Сколько нужно лет практики, чтоб так уверенно все реализовывать?
Вряд ли вам кто-то даст однозначный ответ на этот вопрос. Всё зависит от времени, желания, действий. В серднем - от года.
Можно за год многого добиться, а можно за 5 лет на том же месте остаться)))
какой механизм расчета глубины --depth ?
Фактически, depth - высота body, то есть - блока, который мы прокручиваем. Чем больше depth - тем дальше (глубже) мы можем скролить.
Зависит от количества фреймов и расстояния между ними
I love his work but can't understand Russian 😭
А сколько вам лет?)
Привет. Захожу в Ютуб пролистываю и вижу такой классный видос зашёл и сразу же подписался. Спасибо за классный видос причём полезный и нужный