Тёмный

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

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

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с красивым эффектом при скролле. Сегодня я покажу, как происходит создание таких красивых сайтов и на реальном примере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация синхронной анимации посредством использования библиотеки GSAP.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
01:10 Обзор материалов урока
02:16 Приступаем к созданию сайта
04:14 HTML верстка слайдера
08:20 Приступаем к CSS стилизации
09:04 Подключаем слайдер в JS
09:46 Определяем параметры слайдера
10:27 Верстка элементов управления Swiper
13:13 CSS стилизация слайдов
19:38 Адаптивная верстка заголовка
22:28 Декоративный элемент заголовка
24:09 Оформление подзаголовка
25:41 Верстка кнопки на сайте
28:50 Стилизация элементов управления
30:10 Подготовка анимации на сайте
34:46 Синхронизация анимации со слайдами
42:15 Тип анимации через GSAP Power
43:15 Дополнительная анимация
49:06 Элементы интерфейса на сайте
49:34 Что еще изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

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

 

28 апр 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@wdm
@wdm 18 дней назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@GEELSRC
@GEELSRC 2 дня назад
Это мой лучший канал по фронтенду, сам бекендер но с удовольствием смотрю видео с этого канала, автору респект !
@user-ey2wx2fu7h
@user-ey2wx2fu7h 19 дней назад
господи, лучший канал по реальной фронт разработке, где можно увидеть как используются крутые технологии и библиотеки. Огромное спасибо , беру комплект курсов )
@wdm
@wdm 19 дней назад
Благодарю! Приятного обучения)
@BuggI___08
@BuggI___08 2 дня назад
Только благодаря этой коментарии я подписался
@user-sc2om5fc6b
@user-sc2om5fc6b 10 дней назад
Огромное спасибо за такой контент, где реально показывают как работать с анимацией!!! Благодарю
@anoncatod2177
@anoncatod2177 22 дня назад
Автор, Вы просто золотой самородок среди серости в Ютубе! Спасибо Вам большое за уроки и за курсы!
@andreys3346
@andreys3346 День назад
Смотивировал меня поверстать. 👍
@seal1315
@seal1315 16 дней назад
Обожаю этот канал ! Не пожалел, что взял курсы! Всё изложено четко без воды. Ставит мощную базу💪
@Anastasiya364
@Anastasiya364 22 дня назад
Потрясно. Уже не терпится 🎉❤покодить
@igorsenichev3779
@igorsenichev3779 22 дня назад
Как всегда шикарно! 🤗😇👍
@user-ed2qr2dh7e
@user-ed2qr2dh7e 14 дней назад
Купил курс, решил поддержать тебя, спасибо за твои старания)
@wdm
@wdm 14 дней назад
Спасибо! Приятного обучения)
@ESCOOBAAR
@ESCOOBAAR 19 дней назад
Очень приятно слушать, респект за твои работы!
@user-li7of6vp8u
@user-li7of6vp8u 17 дней назад
Просто ВАУ!!! Спасибо большое))
@user-ox9sz9bu3h
@user-ox9sz9bu3h 22 дня назад
Абалденно🤩🤩🤩 У тебя очень классные видео особенно для самообучения и практики
@user-iz9qx6lv7k
@user-iz9qx6lv7k 22 дня назад
За такое лайк однозначно!!!!
@user-tz5nz1pu4t
@user-tz5nz1pu4t 21 день назад
Как же все круто💥
@dimitridovgan6364
@dimitridovgan6364 22 дня назад
Good tutorial, thank you 👍
@Gda64
@Gda64 22 дня назад
опять шедевр🤩
@m1akarov442
@m1akarov442 18 дней назад
Потрясающе!
@blatov
@blatov 11 дней назад
Очень круто 👍
@AlisherNasimov7580
@AlisherNasimov7580 22 дня назад
Добрый день. Только зашел на Ваш канал. Это что то нереальное! я вначале пути только, начал верстку сайта на Тильде. Сейчас просматриваю figma.. Наткнулся на Ваши видео... Наверное начну учить CSS HTML.. Крутые вещи Вы делаете. От души желаю удачи!
@wdm
@wdm 19 дней назад
Здравствуйте. Спасибо! Успехов в обучении)
@user-kn8nl4lv5y
@user-kn8nl4lv5y 16 дней назад
Тильда - то просто конструктор. А тут можно все. И css + html учить недолго. А вот js подольше.
@gudeFrontend
@gudeFrontend 13 дней назад
Это фантастика!
@Rostyslav-Kinash
@Rostyslav-Kinash 15 дней назад
спасибо за урок
@ranstplay8876
@ranstplay8876 22 дня назад
шедевр
@AlisherNasimov7580
@AlisherNasimov7580 22 дня назад
Super !!!
@Prointech05
@Prointech05 16 дней назад
very nice design
@virtuoz-ru
@virtuoz-ru 22 дня назад
Хороооошь 👍
@MicroDobb
@MicroDobb 22 дня назад
очень интересный урок. никогда бы не подумал что так можно. Автор, еще очень интересна тема спрайтов для веб-приложений. Может когда-нибудь у Вас появится время это объяснить по человечески) Спасибо
@wdm
@wdm 19 дней назад
Здравствуйте. Спасибо! Спрайты немного архаичная тема уже на данный момент.
@MicroDobb
@MicroDobb 19 дней назад
@@wdm понял, просто до сих пор используется в 3д графике, думал тут тоже можно
@wdm
@wdm 19 дней назад
Да, функционально это разные вещи в 3D графике и в веб-разработке. Графические элементы интерфейса сейчас преимущественно в векторе, необходимости делать растровые сеты сейчас нет.
@tor8564
@tor8564 21 день назад
Ой, мама дорогайааа... Что ты со мной делаешь!.......
@consiglieresNet
@consiglieresNet День назад
Как он сделал такие красивые окна проводника и VS code? неужели он сидит на Linux?
@wdm
@wdm День назад
Кастомные темы. Никакого линукса)
@user-yv9gv5jf1v
@user-yv9gv5jf1v 20 дней назад
Какая операционка у автора?
@wdm
@wdm 20 дней назад
В данном уроке используется Windows.
@user-kn8nl4lv5y
@user-kn8nl4lv5y 16 дней назад
​@@wdmа основная какая для работы?)
@knowledge9396
@knowledge9396 13 дней назад
@@wdm Позвольте подробней поинтересоваться, почему весь интерфейс операционной системы выглядит иначе. Конкретно интересует VSCode и его вкладки над которыми ни чего больше нет. Для меня это очень важный момент, так как на экране 14" ноутбука каждый пиксель на счету.
@alexflatiz8120
@alexflatiz8120 13 дней назад
Это же винда 11 с тёмной темой
Далее
Пескоструйный АППАРАТ! #shorts
01:00
NodeJS 22 Just Dropped, Here's Why I'm Hyped
14:31
Просмотров 27 тыс.
Developer Stereotypes to Make You Haha :)
5:52
Просмотров 3,1 тыс.