Создание красивого сайта с 3D эффектом Parallax (HTML + CSS)
Vložit
- čas přidán 17. 05. 2024
- Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с красивым 3D эффектом. Сегодня я покажу, как происходит создание таких крутых сайтов и подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация эффекта глубины на сайте посредством 3D перспективы. Вы удивитесь, насколько просто и быстро можно разрабатывать подобные вещи, используя современный CSS.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
01:23 Обзор материалов урока
02:21 Подготовка изображений для 3D сайта
10:00 Приступаем к HTML верстке сайта
12:20 Подключаем файлы CSS и JavaScript
13:47 HTML верстка сайта (вся разметка)
20:23 Приступаем к CSS стилизации
21:43 Подключение шрифтов CSS
23:29 Стилизация тега body
24:11 Стилизация логотипа на сайте
24:52 Верстка слоев для 3D анимации
28:39 3D эффект с помощью JavaScript
35:55 Слои в 3D пространстве (глубина)
46:04 CSS стилизация контента сайта
47:41 Плавная анимация в CSS
51:37 Стилизация логотипа и текста
57:37 Верстка кнопки (button)
1:01:55 Перекрывающие слои в CSS
1:04:11 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
Чел, ты очень крутой, просто уникум на ютубе! Я хочу занести тебе денег, подписаться на все твои соцсети, вообще поддержать как только могу! Продолжай делать этот офигенный контент, прошу тебя никогда не останавливайся! Тебя послал нам сам Господь, не иначе)
2200080432555742 благодарю , вот мои реквизиты.
Это просто дикость... Что уроки такого уровня не взлетают мгновенно!!! Алексей, именно ты растишь и как я думаю, прививаешь вкус к современному дизайну отечественных разработчиков...
ТЫ ГЛАВНЫЙ ДВИЖ ОТЕЧЕСТВЕННОГО ФРОНТЕНДА!!! Спасибо за науку друг!!!
еще и как проф.озвучка, получше, чем в некоторых сериалах
Порадовало соблюдение культуры кода и подробное комментирование своих действий. А не как у каких-нибудь Гикбрейнсов с их трёхчасовыми вебинарами, на которых 10 минут на отвали что-нибудь напишут, а всё остальное время впаривают свои курсы. Всех вам благ и побольше покупателей!
Нашел с чем сравнивать - Гикбрейнс дно индустрии, где на курсах преподают фрилансеры и на вопросы о каких-то свойствах отвечают примерно так: "не знаю, я это не использовал" вместо "не сталкивался, но я изучу и обязательно расскажу вам"
Увидела заставку и сразу подписалась! У меня культурный шок от такой подачи! Я не программист,но ,как дизайнер не могу пройти мимо! ❤
Без преувеличений, WDM - один из лучших каналов, показывающих не просто какие-то базовые и скучные вещи, по типу "How to center a div", он создаёт и учит создавать волшебные и потрясающие веб-сайты! Надеюсь, однажды я смогу быть таким же крутым, как ты :)
Спасибо!
я теперь оторваться не могу, просто двигаю мышкой и кайфую
Это невероятно крутая подача!
Смотрела на одном дыхании и хочется ещё))
Автор - ты чудо. Есть природный дар - учить людей новому очень легко и с кайфом!
Буду ждать твои новые видео😍
Счастья тебе !
Удивительно сколько информации можно вместить в час видео. Я не новичок и хотел посмотреть пару моментов, но ты на сколько затянул, что весь час пролетел с удовольствием, а главное с огромной пользой!
Ну это 10 из 10. Лучший пример, что я видел.
Алексей, это обалденный урок!! Спасибо вам огромное за такой материал, за все силы, которые вы в это вкладываете. Я прямо в восторге!
очень душевно. побольше подписоты тебе🥰 комментируешь буквально каждое свое действие нескучно и по мере продвижения учишь другим вещам, которые необходимы в профессии! практически ни у кого такого не видела, а ведьэто ценится
Я просто в шоке! Вы просто ГЕНИЙ. Впервые на CZcams вижу контент такого качества! Шикарная дикция, голос и манера подачи материала! Спасибо вам огромное за то, что вы делаете!! Смотреть и слушать это чистый кайф!
Я не занимаюсь веб дизайном, но это был час отличного времяпрепровождения! Чёткая, структурированная речь! Я кайфанул от урока )
Это очень красиво!!!! Я в восторге!!!
давно не заходил на канал, до сих пор уроки и примеры на высшем качестве, освежил некоторые знания из web, классная тема с переменными, очень занимательно)
сказать, что я в восторге - это ничего не сказать! я в диком восторге!!!!! сел смотреть видос и ни разу не шевельнулся! как заворожённый наблюдал за ловкостью рук!!!!!!!!!!!!
Урок бомбический! Такой эффект очень круто придает жизни для страницы!
хотела досмотреть до конца, потом написать комментарий, но не могу сдержать эмоций)) настолько это всё круто! Уже даже на 33й минуте это выглядело волшебно)) Спасибо, за подробное объяснение и, что кроме основного контента, уделяете внимание дополнительным фишечкам, полезность видео вырастает в разы. Не знаю, получится ли у меня такая красота, но буду пробовать. Вы меня вдохновляете💜
Только начала изучать разработку, как же вы вдохновляете
Еще не посмотрел но сразу лайк ! По другому с вашими видео ни как!! спасибо за работу ❤
Спасибо за обучающие видео! Максимально понятная и приятная подача материала)
Автор пожалуйста делайте больше таких видеоуроков у вас выходит очень отлично ❤❤❤❤❤❤❤
Невероятный парень, уровень твоего мастерства и искусства фронт дизайна на высшем уровне!
только открыл ролик и сразу понял)что час моей жизни будет самым крутым за сегодняшний день))спасибо)этот канал достоин большее кол. подписчиков!!!
Отличный урок :) Все очень подробно и понятно изложено. И очень красиво :)
Никогда не видел, чтобы кто-то делал такие красивые сайты. 👍
Урок ❤️🔥❤️🔥❤️🔥 Спасибо огромное!
За это видео я узнал больше, чем за 5 лет обучения
Посмотрел полчаса, а как будто прошло 5 мин. Реально круто и радует доступность и понимание кода, что зачем идет и как что работает. Лайк поставил даже не смотря видео.
Это произведение искусства!
Ты во истину WebDesignMaster 👍
Круто и понятно. Спасибо!
Как всегда очень круто!!! 🔥🔥🔥👍
Благодарю за урок!
Благодарю. Интересная задумка. Первый раз вижу объёмную картинку на сайте
Как обычно Леха выдал крутую базу, красава! больше уроков
Благодарю тебя, мастер ! Ты лучший !
Очень круто ! Благодарю за подробный и понятный урок)
Урок супер. Смотрел полностью и с интересом, хоть и знаю большую часть (не о самом эффекте, просто подробно Алексей все разъясняет как для новичков), ни разу не мотал даже. Появилось желание где ни будь этот эффект применить.
Вы делаете потрясающие сайты)
Спасибо огромное, невероятно ценный материал!
Очень полезное видео! Спасибо за подробное объяснение процесса написания страницы. Теперь я намного увереннее в своих навыках и готов начать работу. Буду ждать еще больше подобных видео от вас!
Это божественно, спасибо!
Спасибо за прекрасный материал.
Большое спасибо! теперь надо изучить внимательно, ничего не упуская
Да что такое, теперь и этот урок хочется повторить) Красота!
за одно видео узнал больше чем за полгода в колледже ахахх, спасибо большое) попробую теперь локальный "сайт" с данной механикой, для презентации игры, спасибо большое)❤
Боже, мой кошелек благодарит тебя за такие бесплатные уроки. Это пушка, спасибо!!!🔥
Невероятно красиво *_*
Спасибо за видео! Очень красиво.
Ооо годнота подъехала! Спасибо 🙏🏻
Хочу присоединиться к остальным участникам и поблагодарить за такой контент. Это круто!!! Спасибо!!!
Пока что это лучший урок, который я выполнил. Большое спасибо!
one of the best videos I have ever seen! thank you! amazing
вот это по истине круто реализовано!
Классный урок, спасибо 👍🏻
Большое спасибо за урок!
Благодарю за прекрасную подачу материала, подробное описание каждого своего клика, и скидку на курсы! Спасибо, большое!
Мы ждали этого
Вау! Очень круто👌👍💪🔥🔥
Спасибо, продолжай делать!, буду поддерживать
Капец, я залипла, шикарный урок!
Просто ВАУ, мегасупер!
Лучший дизайн, что я видел)
Спасибо за урок. Видос пушка
Тааак крууутттооооооооаоаоаоаоаоаа❤❤❤!!!
Лучший !
Очень крутое и залипательное видео а также очень красивый результат. Тебе жирный лайк 👍 и большое спасибо за отличный контент .
Лучший канал на ютубе !
Воуу! Красотища! Я бы даже не ради сайта, а ради картинки занялся бы, но походу капец как сложно!
спасибо большое за урок, было очень интересно
Очень круто,повторила на одном дыхании!спасибо
очень круто делаешь уроки и то что на них делаешь 👍👍👍 благодаря тебе апнул скил верстки
Блин, я разработчик, но я залип капец. Эта реч, это что-то нечто. Спасибо, Странно что у тебя только, ты крут!!!!!
Очень круто 🔥👍
правда, красиво
на 24 секунде аж подписался...никогда не видел таких сайтов в реальности
Nice Work!! 😎😎😎
просто шикарно
Нууу головааааа👍👍 Сколько опыта у человека, что такие сложные вещи для новичка объясняет как яишку жарить😅Спасибо за урок
Крутой ты чел, спасибо тебе! 😎👍
подписка.
шикарный контент.
Это впечатляет👍😌
Спасибо большое. Потрясающий урок. Все получилось.
Оoooчень крутое 3D
Реальное крутое и полезное видео! В закладки!
Мощь !
Can we get english subtitles? Ireally loved your work?
Ось так повинен виглядіти відеоурок по вебдизайну. Дякую автору!
Очень жду новый гайд, интересно какую идею вы представите на этот раз❤
코팅 대천사...💜💜💜💜💜💜💜💜
Я ничего не понимаю в коде, но очень нравится результат)))идея класс🤩
Хоть я отношения не имею к front'у, но всё же огромное спасибо, очень интересно! 👍
Учился на факультете в своё время Технология и защита автоматизированных систем, не доучился, программирование меня добило, забил на это всё. А так завидую сейчас людям кто это всё умеет. С правильным направление мозгов это золотая жилка. Друг который это всё познал, сидит дома, потягивает вискарь и зарабатывает не малые бабосы, эх.....
О боги, какая красота❤ я получила визуальный оргазм... простите ❤
Не, ну это подписка, объективно
ничего себе !
это просто вау, жаль
что про бэк таких крутых видео мало
большое спасибо
Супермен