Тёмный

Создание сайта с плавной анимацией перемещения (HTML + CSS) 

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

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с плавной анимацией, реализуем самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode). Кроме того, я покажу, как правильно разрабатывать прелоадер для подобных сайтов. Решение для мобильных устройств и другие полезные дополнения на странице урока.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
03:36 HTML верстка заголовка
03:51 Базовая стилизация и CSS переменные
06:09 Стилизация заголовка и прелоадера
12:07 Создание галереи с анимацией движения
13:33 Быстрая HTML разметка с Emmet
16:19 Самый простой способ верстки Masonry
17:03 Разработка сайта с перемещением мышью
20:13 Область перемещения и анимация инерции
21:33 Плавность анимации и фикс изображений
25:37 Разработка прелоадера (right way)
29:55 Поддержка темной темы (Dark Mode)
32:39 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

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

 

10 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 59   
@wdm
@wdm 2 месяца назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@user-zx2ur7rc9q
@user-zx2ur7rc9q 2 года назад
Уровень вёрстки к которому я стремлюсь
@FifaKisaKittens
@FifaKisaKittens 2 года назад
Спасибо огромное Алексей!!! Как всегда супер!!! Твои проекты отличаются всегда стилем и классом, лично мне всегда хочется повторить и сделать за тобой каждый проект!!! Ещё раз благодарю!!! 👍👍👍🙏🙏🙏👍👍👍
@user-gj3by6gy1r
@user-gj3by6gy1r 2 года назад
Полностью согласен!!!
@luksik0
@luksik0 Год назад
Ох, как же круто! Спасибо что делаете это, всегда кайф!
@Msmilegame
@Msmilegame 2 года назад
Спасибо! Как всегда хороший и полезный материал.
@fedorevseev8867
@fedorevseev8867 2 года назад
Монтаж видео супер, видео четкое, все по существу, стоит смотреть всем и дизайнерам тоже!
@nero-je9ni
@nero-je9ni 2 года назад
с размером шрифта было мегаполезно, спасибо большое!
@user-yl1ws9qj6e
@user-yl1ws9qj6e 2 года назад
Отличный материал. Купил все ваши курсы для прокачки скилла. Спасибо.
@vadimkarandashev41
@vadimkarandashev41 2 года назад
Спасибо. Как всегда, на 100% полезно и познавательно
@katerynabalabushkina1353
@katerynabalabushkina1353 Год назад
Обожаю ваш канал!!!! Благодарю за подробную информацию! ❤️
@raijinhasarrived
@raijinhasarrived 2 года назад
Балдею с твоей подачи
@beldack8273
@beldack8273 Год назад
Спасибо большое, ты помогаешь мне развиваться в сфере CSS
@ZimaTimofey
@ZimaTimofey 2 года назад
Спасибо за урок.
@user-rl1gx9cq9o
@user-rl1gx9cq9o 2 года назад
Большое Человеческое Спасибо!!!
@game_m
@game_m 2 года назад
Спасибо! Очень круто получилось
@runlikem3
@runlikem3 2 года назад
коротко и понятно, спасибо огромное!!! 😊
@user-dp8xc9tx8n
@user-dp8xc9tx8n 9 месяцев назад
Ждем еще таких креативных контентов
@user-vt2fc5lw7b
@user-vt2fc5lw7b Год назад
Большое спасибо за урок!!!! круто получилось!
@user-rt2mj5jq1d
@user-rt2mj5jq1d Год назад
Благодарю за урок!
@user-ii9fz3be1r
@user-ii9fz3be1r 2 года назад
Вы лучший! Супер
@eprohoda
@eprohoda 2 года назад
добрый вечер~Ну и нну~необычн. монтаж. всего наилудшего. :)
@alexandrshulgin82
@alexandrshulgin82 2 года назад
чел, ты реально крут
@wolftool3868
@wolftool3868 2 года назад
Мощно!
@m1akarov442
@m1akarov442 2 года назад
Крутой Сайт! Спасибо
@user-xt5sm6yj6f
@user-xt5sm6yj6f 2 года назад
последние видосы огонь
@kimalhasanov3793
@kimalhasanov3793 Год назад
Спасибо большое за урок🙏 Подскажите пожалуйста, есть ли у вас какой то курс что бы научится понимать и выстраивать логику построения таких конструкций? По вашим урокам делаю, особых вопросов нет. Но, когда пытаюсь составить конструкцию в голове - мрак. Чувствую что туго с этим(
@VOLGAr34
@VOLGAr34 2 года назад
Респект!!!
@saydo9003
@saydo9003 2 года назад
Топ!
@weneedaspace
@weneedaspace 2 года назад
крутой урок
@dishaforex
@dishaforex 2 года назад
Спасибо за урок! Не думал, что такое можно сделать! А какая у вас тема оформления Винды?
@wdm
@wdm 2 года назад
Тема оформления - обычная темная тема. Windows.
@anndyy7
@anndyy7 2 года назад
супер
@valdemar0s
@valdemar0s 2 года назад
Какой вы используете сайт для покупки домена и хостинга?
@wdm
@wdm 2 года назад
В этом уроке подробно рассказал, чем пользуюсь: webdesign-master.ru/blog/tools/hosting-lesson.html
@Mistrdoro
@Mistrdoro Год назад
Привет, спасибо за урок, всё понятно и по полочкам разложено, но не понятна одна вещь, как поместить какой-либо контент поверх плиток, например, у меня есть header, который должен быть поверх изображений, а также header должен быть кликабелен, как это можно реализовать?
@selimallaberdiyew2489
@selimallaberdiyew2489 Год назад
position:absolute/z-index (0-1). button
@user-to5sc9pi5g
@user-to5sc9pi5g 11 месяцев назад
А можно ли ещё добавить зум, чтобы скейл при скролле уменьшался/добавлялся?
@wdm
@wdm 11 месяцев назад
Хм, интересная идея. Вообще без проблем)
@dmitriykret8938
@dmitriykret8938 2 года назад
👍 +++
@dragonborn4499
@dragonborn4499 2 года назад
Покажи как хостинг делаешь, если сможешь)
@wdm
@wdm 2 года назад
По хостингу есть отдельный комплексный урок: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KMVOS5DMhSc.html
@Joker-ok8tm
@Joker-ok8tm 2 года назад
Спасибо, очень познавательно получилось. А у меня такой вопросик возник как сделать так что бі при наведении на картинку можно было нажать на неё и перейти на какой либо сайт, но при этом всё равно можно было двигать все картинки. И возможно ли это сделать вообще?
@wdm
@wdm 2 года назад
Здравствуйте. Просто оберните в тег a. А там посмотрите, что нужно достилизовать. Без проблем.
@Joker-ok8tm
@Joker-ok8tm 2 года назад
@@wdm Да я там немного по другому сделал, но спасибо за ответ😁👍
@user-gc8rz2ec4b
@user-gc8rz2ec4b 2 года назад
Как вывести текст поверх картинок? Спасибо за классный урок!
@user-np6kj1xh6h
@user-np6kj1xh6h 2 года назад
Попробуйте опустить под ... и увеличить его z-index
@user-qr8ql9kx9s
@user-qr8ql9kx9s 2 года назад
А если я до этого тока на конструкторе сайты собирал, за какое время можно такой сайт собрать ?
@flash8911
@flash8911 2 года назад
Если делать все как в видосе и ты ни разу не открывал вс код то до 2-х часов примерно
@murtazka8115
@murtazka8115 2 года назад
скажите название пипетки плиз!
@wdm
@wdm 2 года назад
Instant Eyedropper
@user-yl1ws9qj6e
@user-yl1ws9qj6e 2 года назад
Скажи пожалуйста чем отличается 30% от 30vw
@user-mw7fm4ec5p
@user-mw7fm4ec5p 2 года назад
% - вычисляется от ближайшего родителя с position: relative/absolute/fixed vw/vh - от области просмотра
@user-vz3el7uy4m
@user-vz3el7uy4m 2 года назад
Подскажите как на картинку ссылку добавить
@user-mw7fm4ec5p
@user-mw7fm4ec5p 2 года назад
Поместить картину внутрь ссылки (тег ) или сделать обработку Js на событие onclick
@aidamur
@aidamur Год назад
Как сделать, чтобы сайт сам обновлялся после каждой правки?
@wdm
@wdm Год назад
Запустить сервер, как было показано в начале урока.
@ShadowShadow-ux1ms
@ShadowShadow-ux1ms 2 года назад
А на андроид как создать
@user-mw7fm4ec5p
@user-mw7fm4ec5p 2 года назад
Что Вы имеете ввиду под созданием на Android? Если адаптацию - то данный фронтенд уже подходит для мобилок. Если среду разработки - любая из плей-маркета (они все одинаково неудобны. Всё-таки, программировать с телефона/планшета - убийственно))
Далее
Настройка VS Code для верстки
34:27
Просмотров 298 тыс.
We Got Expelled From Scholl After This...
00:10
Просмотров 7 млн