Создание красивого сайта с 3D эффектом Parallax (HTML + CSS)
HTML-код
- Опубликовано: 18 май 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", он создаёт и учит создавать волшебные и потрясающие веб-сайты! Надеюсь, однажды я смогу быть таким же крутым, как ты :)
Спасибо!
давно не заходил на канал, до сих пор уроки и примеры на высшем качестве, освежил некоторые знания из web, классная тема с переменными, очень занимательно)
Спасибо за обучающие видео! Максимально понятная и приятная подача материала)
Ну это 10 из 10. Лучший пример, что я видел.
Это невероятно крутая подача!
Смотрела на одном дыхании и хочется ещё))
Автор - ты чудо. Есть природный дар - учить людей новому очень легко и с кайфом!
Буду ждать твои новые видео😍
Счастья тебе !
Удивительно сколько информации можно вместить в час видео. Я не новичок и хотел посмотреть пару моментов, но ты на сколько затянул, что весь час пролетел с удовольствием, а главное с огромной пользой!
Автор пожалуйста делайте больше таких видеоуроков у вас выходит очень отлично ❤❤❤❤❤❤❤
Только начала изучать разработку, как же вы вдохновляете
Урок ❤️🔥❤️🔥❤️🔥 Спасибо огромное!
Еще не посмотрел но сразу лайк ! По другому с вашими видео ни как!! спасибо за работу ❤
Я не занимаюсь веб дизайном, но это был час отличного времяпрепровождения! Чёткая, структурированная речь! Я кайфанул от урока )
Невероятный парень, уровень твоего мастерства и искусства фронт дизайна на высшем уровне!
Никогда не видел, чтобы кто-то делал такие красивые сайты. 👍
Благодарю тебя, мастер ! Ты лучший !
Как всегда очень круто!!! 🔥🔥🔥👍
Это очень красиво!!!! Я в восторге!!!
Посмотрел полчаса, а как будто прошло 5 мин. Реально круто и радует доступность и понимание кода, что зачем идет и как что работает. Лайк поставил даже не смотря видео.
Урок супер. Смотрел полностью и с интересом, хоть и знаю большую часть (не о самом эффекте, просто подробно Алексей все разъясняет как для новичков), ни разу не мотал даже. Появилось желание где ни будь этот эффект применить.
Я просто в шоке! Вы просто ГЕНИЙ. Впервые на RUclips вижу контент такого качества! Шикарная дикция, голос и манера подачи материала! Спасибо вам огромное за то, что вы делаете!! Смотреть и слушать это чистый кайф!
Спасибо за прекрасный материал.
сказать, что я в восторге - это ничего не сказать! я в диком восторге!!!!! сел смотреть видос и ни разу не шевельнулся! как заворожённый наблюдал за ловкостью рук!!!!!!!!!!!!
только открыл ролик и сразу понял)что час моей жизни будет самым крутым за сегодняшний день))спасибо)этот канал достоин большее кол. подписчиков!!!
Это произведение искусства!
Ты во истину WebDesignMaster 👍
Это божественно, спасибо!
Вы делаете потрясающие сайты)
Урок бомбический! Такой эффект очень круто придает жизни для страницы!
Спасибо огромное, невероятно ценный материал!
Очень круто ! Благодарю за подробный и понятный урок)
Большое спасибо! теперь надо изучить внимательно, ничего не упуская
Как обычно Леха выдал крутую базу, красава! больше уроков
Благодарю за урок!
Круто и понятно. Спасибо!
Спасибо за видео! Очень красиво.
Очень полезное видео! Спасибо за подробное объяснение процесса написания страницы. Теперь я намного увереннее в своих навыках и готов начать работу. Буду ждать еще больше подобных видео от вас!
Ооо годнота подъехала! Спасибо 🙏🏻
хотела досмотреть до конца, потом написать комментарий, но не могу сдержать эмоций)) настолько это всё круто! Уже даже на 33й минуте это выглядело волшебно)) Спасибо, за подробное объяснение и, что кроме основного контента, уделяете внимание дополнительным фишечкам, полезность видео вырастает в разы. Не знаю, получится ли у меня такая красота, но буду пробовать. Вы меня вдохновляете💜
За это видео я узнал больше, чем за 5 лет обучения
Да что такое, теперь и этот урок хочется повторить) Красота!
за одно видео узнал больше чем за полгода в колледже ахахх, спасибо большое) попробую теперь локальный "сайт" с данной механикой, для презентации игры, спасибо большое)❤
Большое спасибо за урок!
Классный урок, спасибо 👍🏻
Благодарю. Интересная задумка. Первый раз вижу объёмную картинку на сайте
Хочу присоединиться к остальным участникам и поблагодарить за такой контент. Это круто!!! Спасибо!!!
вот это по истине круто реализовано!
Боже, мой кошелек благодарит тебя за такие бесплатные уроки. Это пушка, спасибо!!!🔥
Спасибо, продолжай делать!, буду поддерживать
Благодарю за прекрасную подачу материала, подробное описание каждого своего клика, и скидку на курсы! Спасибо, большое!
Отличный урок :) Все очень подробно и понятно изложено. И очень красиво :)
Пока что это лучший урок, который я выполнил. Большое спасибо!
Вау! Очень круто👌👍💪🔥🔥
Спасибо за урок. Видос пушка
Невероятно красиво *_*
Капец, я залипла, шикарный урок!
Лучший дизайн, что я видел)
очень круто делаешь уроки и то что на них делаешь 👍👍👍 благодаря тебе апнул скил верстки
спасибо большое за урок, было очень интересно
one of the best videos I have ever seen! thank you! amazing
Воуу! Красотища! Я бы даже не ради сайта, а ради картинки занялся бы, но походу капец как сложно!
Очень круто,повторила на одном дыхании!спасибо
Блин, я разработчик, но я залип капец. Эта реч, это что-то нечто. Спасибо, Странно что у тебя только, ты крут!!!!!
Лучший !
Очень крутое и залипательное видео а также очень красивый результат. Тебе жирный лайк 👍 и большое спасибо за отличный контент .
Тааак крууутттооооооооаоаоаоаоаоаа❤❤❤!!!
Мы ждали этого
Лучший канал на ютубе !
Очень круто 🔥👍
Крутой ты чел, спасибо тебе! 😎👍
Спасибо большое. Потрясающий урок. Все получилось.
코팅 대천사...💜💜💜💜💜💜💜💜
Это впечатляет👍😌
Nice Work!! 😎😎😎
Нууу головааааа👍👍 Сколько опыта у человека, что такие сложные вещи для новичка объясняет как яишку жарить😅Спасибо за урок
подписка.
шикарный контент.
Просто ВАУ, мегасупер!
Очень жду новый гайд, интересно какую идею вы представите на этот раз❤
Реальное крутое и полезное видео! В закладки!
Оoooчень крутое 3D
Хоть я отношения не имею к front'у, но всё же огромное спасибо, очень интересно! 👍
на 24 секунде аж подписался...никогда не видел таких сайтов в реальности
Я ничего не понимаю в коде, но очень нравится результат)))идея класс🤩
правда, красиво
просто шикарно
Мощь !
большое спасибо
О боги, какая красота❤ я получила визуальный оргазм... простите ❤
Ось так повинен виглядіти відеоурок по вебдизайну. Дякую автору!
это просто вау, жаль
что про бэк таких крутых видео мало
ничего себе !
Супермен
Круто
Не, ну это подписка, объективно
Учился на факультете в своё время Технология и защита автоматизированных систем, не доучился, программирование меня добило, забил на это всё. А так завидую сейчас людям кто это всё умеет. С правильным направление мозгов это золотая жилка. Друг который это всё познал, сидит дома, потягивает вискарь и зарабатывает не малые бабосы, эх.....