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

Все курсы в одном комплекте: 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

[@wdm]

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

[@placid3495]

Чел, ты очень крутой, просто уникум на ютубе! Я хочу занести тебе денег, подписаться на все твои соцсети, вообще поддержать как только могу! Продолжай делать этот офигенный контент, прошу тебя никогда не останавливайся! Тебя послал нам сам Господь, не иначе)

[@user-wp3ew7vw6e]

2200080432555742 благодарю , вот мои реквизиты.

[@user-cq8bt8bp8e]

Это просто дикость... Что уроки такого уровня не взлетают мгновенно!!! Алексей, именно ты растишь и как я думаю, прививаешь вкус к современному дизайну отечественных разработчиков... ТЫ ГЛАВНЫЙ ДВИЖ ОТЕЧЕСТВЕННОГО ФРОНТЕНДА!!! Спасибо за науку друг!!!

[@pawpawqwertyuiop]

еще и как проф.озвучка, получше, чем в некоторых сериалах

[@lsdkkdkkd]

я теперь оторваться не могу, просто двигаю мышкой и кайфую

[@kayfonso]

Порадовало соблюдение культуры кода и подробное комментирование своих действий. А не как у каких-нибудь Гикбрейнсов с их трёхчасовыми вебинарами, на которых 10 минут на отвали что-нибудь напишут, а всё остальное время впаривают свои курсы. Всех вам благ и побольше покупателей!

[@UC1C0GDMTjasAdhELHZ6lZNg]

Нашел с чем сравнивать - Гикбрейнс дно индустрии, где на курсах преподают фрилансеры и на вопросы о каких-то свойствах отвечают примерно так: "не знаю, я это не использовал" вместо "не сталкивался, но я изучу и обязательно расскажу вам"

[@ilyamanga]

У меня челюсть отпала от подобных финтов.

[@user-qg3gm3fi6q]

Увидела заставку и сразу подписалась! У меня культурный шок от такой подачи! Я не программист,но ,как дизайнер не могу пройти мимо! ❤

[@anafro_ru]

Без преувеличений, WDM - один из лучших каналов, показывающих не просто какие-то базовые и скучные вещи, по типу "How to center a div", он создаёт и учит создавать волшебные и потрясающие веб-сайты! Надеюсь, однажды я смогу быть таким же крутым, как ты :) Спасибо!

[@tvoydrugs]

очень душевно. побольше подписоты тебе🥰 комментируешь буквально каждое свое действие нескучно и по мере продвижения учишь другим вещам, которые необходимы в профессии! практически ни у кого такого не видела, а ведьэто ценится

[@user-ph3ku3yt2c]

Алексей, это обалденный урок!! Спасибо вам огромное за такой материал, за все силы, которые вы в это вкладываете. Я прямо в восторге!

[@ode2877]

давно не заходил на канал, до сих пор уроки и примеры на высшем качестве, освежил некоторые знания из web, классная тема с переменными, очень занимательно)

[@trueslav3999]

Удивительно сколько информации можно вместить в час видео. Я не новичок и хотел посмотреть пару моментов, но ты на сколько затянул, что весь час пролетел с удовольствием, а главное с огромной пользой!

[@user-ro9gh6ce3z]

Это невероятно крутая подача! Смотрела на одном дыхании и хочется ещё)) Автор - ты чудо. Есть природный дар - учить людей новому очень легко и с кайфом! Буду ждать твои новые видео😍 Счастья тебе !

[@arche3105]

Еще не посмотрел но сразу лайк ! По другому с вашими видео ни как!! спасибо за работу ❤

[@user-wi1hu8mn3v]

Только начала изучать разработку, как же вы вдохновляете

[@tigr9678]

Спасибо за обучающие видео! Максимально понятная и приятная подача материала)

[@justme3015]

Я просто в шоке! Вы просто ГЕНИЙ. Впервые на KZbin вижу контент такого качества! Шикарная дикция, голос и манера подачи материала! Спасибо вам огромное за то, что вы делаете!! Смотреть и слушать это чистый кайф!

[@rodionmalashenko8607]

только открыл ролик и сразу понял)что час моей жизни будет самым крутым за сегодняшний день))спасибо)этот канал достоин большее кол. подписчиков!!!

[@KarlssonFrost]

Я не занимаюсь веб дизайном, но это был час отличного времяпрепровождения! Чёткая, структурированная речь! Я кайфанул от урока )

[@Frame_4k]

Урок бомбический! Такой эффект очень круто придает жизни для страницы!

[@StasKol]

Посмотрел полчаса, а как будто прошло 5 мин. Реально круто и радует доступность и понимание кода, что зачем идет и как что работает. Лайк поставил даже не смотря видео.

[@glebsuverin6975]

Как обычно Леха выдал крутую базу, красава! больше уроков

[@Levi-Ezio]

Автор пожалуйста делайте больше таких видеоуроков у вас выходит очень отлично ❤❤❤❤❤❤❤

[@igorsenichev3779]

Как всегда очень круто!!! 🔥🔥🔥👍

[@tosya1101]

сказать, что я в восторге - это ничего не сказать! я в диком восторге!!!!! сел смотреть видос и ни разу не шевельнулся! как заворожённый наблюдал за ловкостью рук!!!!!!!!!!!!

[@luteabanks659]

Урок ❤️‍🔥❤️‍🔥❤️‍🔥 Спасибо огромное!

[@user-gi9zc5hw8n]

Очень круто ! Благодарю за подробный и понятный урок)

[@nicefellow7929]

Это произведение искусства! Ты во истину WebDesignMaster 👍

[@neo3248]

Вы делаете потрясающие сайты)

[@jester-zu2yg]

Очень полезное видео! Спасибо за подробное объяснение процесса написания страницы. Теперь я намного увереннее в своих навыках и готов начать работу. Буду ждать еще больше подобных видео от вас!

[@UT4_cloWn]

за одно видео узнал больше чем за полгода в колледже ахахх, спасибо большое) попробую теперь локальный "сайт" с данной механикой, для презентации игры, спасибо большое)❤

[@web-dev-pro]

Урок супер. Смотрел полностью и с интересом, хоть и знаю большую часть (не о самом эффекте, просто подробно Алексей все разъясняет как для новичков), ни разу не мотал даже. Появилось желание где ни будь этот эффект применить.

[@kapitankrolick]

хотела досмотреть до конца, потом написать комментарий, но не могу сдержать эмоций)) настолько это всё круто! Уже даже на 33й минуте это выглядело волшебно)) Спасибо, за подробное объяснение и, что кроме основного контента, уделяете внимание дополнительным фишечкам, полезность видео вырастает в разы. Не знаю, получится ли у меня такая красота, но буду пробовать. Вы меня вдохновляете💜

[@yourdima9790]

Невероятный парень, уровень твоего мастерства и искусства фронт дизайна на высшем уровне!

[@ivi4628]

Благодарю. Интересная задумка. Первый раз вижу объёмную картинку на сайте

[@kefir706]

Это очень красиво!!!! Я в восторге!!!

[@user-yr5os5vq9l]

Отличный урок :) Все очень подробно и понятно изложено. И очень красиво :)

[@SvirkoSam]

Ооо годнота подъехала! Спасибо 🙏🏻

[@user-iz3nq2su3r]

Боже, мой кошелек благодарит тебя за такие бесплатные уроки. Это пушка, спасибо!!!🔥

[@VV-hk8bq]

Пока что это лучший урок, который я выполнил. Большое спасибо!

[@vittoriacosce5442]

Спасибо огромное, невероятно ценный материал!

[@MicroDobb]

Большое спасибо! теперь надо изучить внимательно, ничего не упуская

[@alenadecor5754]

Да что такое, теперь и этот урок хочется повторить) Красота!

[@user-ju3up7sl5j]

Благодарю тебя, мастер ! Ты лучший !

[@Alex-bw3my]

Хочу присоединиться к остальным участникам и поблагодарить за такой контент. Это круто!!! Спасибо!!!

[@Aselina742]

Благодарю за прекрасную подачу материала, подробное описание каждого своего клика, и скидку на курсы! Спасибо, большое!

[@Daima_nt]

Это божественно, спасибо!

[@ruru6778]

Капец, я залипла, шикарный урок!

[@funcomedy2]

Классный урок, спасибо 👍🏻

[@Vovka_Fitin1]

Воуу! Красотища! Я бы даже не ради сайта, а ради картинки занялся бы, но походу капец как сложно!

[@jaguarskillzz8922]

Лучший дизайн, что я видел)

[@vitaliysidorov4777]

Спасибо, продолжай делать!, буду поддерживать

[@turtrueweb]

Спасибо за прекрасный материал.

[@cryptohost]

Ну это 10 из 10. Лучший пример, что я видел.

[@bitur7106]

вот это по истине круто реализовано!

[@abab-uo9zj]

Спасибо за видео! Очень красиво.

[@user-fd8mh4tb4c]

Блин, я разработчик, но я залип капец. Эта реч, это что-то нечто. Спасибо, Странно что у тебя только, ты крут!!!!!

[@user-mb2so1tg5u]

Большое спасибо за урок!

[@user-ii9fz3be1r]

Просто ВАУ, мегасупер!

[@fobianka2131]

спасибо большое за урок, было очень интересно

[@Ohhhnailsss]

Очень круто,повторила на одном дыхании!спасибо

[@Konstantin_exe]

Лучший канал на ютубе !

[@alexbadylevich7236]

очень круто делаешь уроки и то что на них делаешь 👍👍👍 благодаря тебе апнул скил верстки

[@javados7249]

Очень крутое и залипательное видео а также очень красивый результат. Тебе жирный лайк 👍 и большое спасибо за отличный контент .

[@renaldos1779]

Спасибо за урок. Видос пушка

[@EvgeniyYatsenko]

шикарный урок!

[@votemha]

За это видео я узнал больше, чем за 5 лет обучения

[@rkua9594]

Вау! Очень круто👌👍💪🔥🔥

[@Rulnid]

Мы ждали этого

[@user-iw7mj1ci5e]

Нууу головааааа👍👍 Сколько опыта у человека, что такие сложные вещи для новичка объясняет как яишку жарить😅Спасибо за урок

[@user-ve8ux5yy7y]

Круто и понятно. Спасибо!

[@ruinxr9]

Благодарю за урок!

[@saadd7]

Никогда не видел, чтобы кто-то делал такие красивые сайты. 👍

[@user-is9nx5je5t]

Спасибо большое. Потрясающий урок. Все получилось.

[@vyacheslav_platonoff]

Очень круто 🔥👍

[@ruslankh9004]

one of the best videos I have ever seen! thank you! amazing

[@Dayplaylist]

Это впечатляет👍😌

[@alexeysuharev4418]

на 24 секунде аж подписался...никогда не видел таких сайтов в реальности

[@septorlive6953]

Просто лучший из лучших

[@berikseitkul7285]

Тааак крууутттооооооооаоаоаоаоаоаа❤❤❤!!!

[@RustHrust1]

Реальное крутое и полезное видео! В закладки!

[@belligalaton9091]

Невероятно красиво *_*

[@kishafromukraine]

Ось так повинен виглядіти відеоурок по вебдизайну. Дякую автору!

[@Kiki-rg7ds]

코팅 대천사...💜💜💜💜💜💜💜💜

[@user-vt2qb3ng8y]

Крутой ты чел, спасибо тебе! 😎👍

[@vvvttt7595]

просто шикарно

[@scopionsyomero]

Nice Work!! 😎😎😎

[@Exclu7ive]

Не, ну это подписка, объективно

[@tensymbols]

подписка. шикарный контент.

[@Vladimir_F609]

Хоть я отношения не имею к front'у, но всё же огромное спасибо, очень интересно! 👍

[@alina_adamovich]

Я ничего не понимаю в коде, но очень нравится результат)))идея класс🤩

[@tanatarmaibassar2039]

Очень жду новый гайд, интересно какую идею вы представите на этот раз❤

[@gostsleem]

это просто вау, жаль что про бэк таких крутых видео мало

[@front_praxis]

Мощь !

[@user-kv5ze5qc2b]

О боги, какая красота❤ я получила визуальный оргазм... простите ❤

[@alex_mc_arrow]

Оoooчень крутое 3D

[@unicoxr5tj417]

правда, красиво

[@briancolins2915]

Учился на факультете в своё время Технология и защита автоматизированных систем, не доучился, программирование меня добило, забил на это всё. А так завидую сейчас людям кто это всё умеет. С правильным направление мозгов это золотая жилка. Друг который это всё познал, сидит дома, потягивает вискарь и зарабатывает не малые бабосы, эх.....

[@ii_l1zard_ii]

Лучший !

[@LifeExperience15]

Урок неимоверно крутой, купленные тоже отличные по содержанию и развёртке информации. С плагином открытия страницы пока справиться не получилось, обновляется только текст, строки, дождь и т.д. пока не подключаются. Спассибо!

[@wdm]

Здравствуйте. Благодарю. 1. Проверьте, разместили ли вы файл библиотеки в нужной папке. 2. Проверьте, нет ли ошибок в консоли браузера.