Создание сайта с красивой анимацией при скролле (HTML CSS JavaScript)
Вставка
- Опубліковано 7 чер 2024
- Все курсы в одном комплекте: 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
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
господи, лучший канал по реальной фронт разработке, где можно увидеть как используются крутые технологии и библиотеки. Огромное спасибо , беру комплект курсов )
Благодарю! Приятного обучения)
Мужик, ты реально мегамозг!
Все доходчиво, интересно, с объяснениями.
Очень благодарен тебе, просто лучший!
Обожаю этот канал ! Не пожалел, что взял курсы! Всё изложено четко без воды. Ставит мощную базу💪
Огромное спасибо за такой контент, где реально показывают как работать с анимацией!!! Благодарю
Автор, Вы просто золотой самородок среди серости в Ютубе! Спасибо Вам большое за уроки и за курсы!
Потрясно. Уже не терпится 🎉❤покодить
Очень приятно слушать, респект за твои работы!
Это мой лучший канал по фронтенду, сам бекендер но с удовольствием смотрю видео с этого канала, автору респект !
Абалденно🤩🤩🤩 У тебя очень классные видео особенно для самообучения и практики
Как всегда шикарно! 🤗😇👍
Респект ! Так классно все объясняет и показывает!
Просто ВАУ!!! Спасибо большое))
Купил курс, решил поддержать тебя, спасибо за твои старания)
Спасибо! Приятного обучения)
Добрый день. Только зашел на Ваш канал. Это что то нереальное! я вначале пути только, начал верстку сайта на Тильде. Сейчас просматриваю figma.. Наткнулся на Ваши видео... Наверное начну учить CSS HTML.. Крутые вещи Вы делаете. От души желаю удачи!
Здравствуйте. Спасибо! Успехов в обучении)
Спасибо за урок! Просто годнота ❤
Как же все круто💥
Смотивировал меня поверстать. 👍
опять шедевр🤩
За такое лайк однозначно!!!!
Good tutorial, thank you 👍
Потрясающе!
Это фантастика!
За стилизацию swiper спасибо.
Очень круто 👍
спасибо за урок
Очень круто, все объясняется, просто шикарно. А как после скрола добавить ещё
Просто размещаете контент дальше, а там можете и анимацию перехода какую-нибудь сделать.
Super !!!
very nice design
шедевр
Хороооошь 👍
очень интересный урок. никогда бы не подумал что так можно. Автор, еще очень интересна тема спрайтов для веб-приложений. Может когда-нибудь у Вас появится время это объяснить по человечески) Спасибо
Здравствуйте. Спасибо! Спрайты немного архаичная тема уже на данный момент.
@@wdm понял, просто до сих пор используется в 3д графике, думал тут тоже можно
Да, функционально это разные вещи в 3D графике и в веб-разработке. Графические элементы интерфейса сейчас преимущественно в векторе, необходимости делать растровые сеты сейчас нет.
А можете сделать музыкальный плеер)
Подскажите, есть ли какие-то решения, если на фон нужно вставить видео с альфа-каналом, чтобы была возможность работать с бэкграундом?
Нет, только стилизация видео в редакторе под окружение в сцене.
А можете, красивый профиль показать как сделать)
Как получить все коды сразу?
Какая операционка у автора?
В данном уроке используется Windows.
@@wdm Позвольте подробней поинтересоваться, почему весь интерфейс операционной системы выглядит иначе. Конкретно интересует VSCode и его вкладки над которыми ни чего больше нет. Для меня это очень важный момент, так как на экране 14" ноутбука каждый пиксель на счету.
Какое расширение он использует для того чтоб работал swiper ???? Помогите пожалуйста
Какое расширение?
@@wdmпросто у меня почему то не свайпается на другой слайд
У вас опечатка. Проверьте наличие библиотеки в libs и корректность подключения. Если в готовом примере работает, значит у вас опечатка или плагин некорректно подключен.
@@wdm спасибо, у меня все работает, я просто забыл библиотеку
@@vovan454 бывает)
Ой, мама дорогайааа... Что ты со мной делаешь!.......
Можете помочь, мне в терминале пишет Error opening input: No such file or directory
Error opening input file background-60.mp4.
Error opening input files: No such file or directory, когда я вставляю команду которая есть в папке, как решить?
А терминал в какой папке запущен? Его нужно запустить в той папке, где есть этот файл.
@@wdm терминалу дал путь именно как у вас C:\Program Files\ffmpeg\bin у меня все запущен но, видео не читает и я не понимаю как, хотя сделал так как вы показали но, у вас видео название такой background-60.mp4 а у меня background-60, но я не знаю насколько это влияет. Можете что нибудь посоветовать?
В настройках папки следует включить отображение расширений файлов, если оно отключено. Там в папке нужно найти настройки и отключить галочку "скрывать расширения". После этого обязательно нужно убедиться, что открыта именно та папка, в которой есть "background-60.mp4", вместе с расширением .mp4. В этой папке нужно запустить правой кнопкой мыши терминал и выполнить команду конвертации.
@@wdmА у вас Виндовс или Линукс? Ну я сделал как вы написали, ну так: нашли "скрывать расширений" и убрали галочку и сразу рядом background-60 появился слово .mp4 но все равно дает ошибку. Я не могу открыть терминал именно в папке, я открываю терминал с Win+R и пишу CMD и там написано C:\Users\abdul> и вставляю вашу команду, то есть вот так выходит: C:\Users\abdul> ffmpeg -i background-60.mp4 -vf scale=1920:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p background.mp4 и нажимаю Энтер и выходит ошибка. У меня Windows может поэтому у меня проблема
Нужно открыть терминал именно в папке. Зажмите Shift, правая кнопка мыши и появится нужный пункт. У меня Windows.
как скачать HTML и CSS?
На странице урока, ссылка в описании.
Как ти сделал такой vs code
В папке User создаём custom.css и в нём стилизуем интерфейс как удобно. Можно использовать DevTools в пункте меню Help, чтобы посмотреть DOM.
@@wdm ти етот шедевр сам сделал
Ну, VS Code - это по сути та же веб-страничка, можно оформить как хочешь 😄
@@wdm круто я не знал што так можно, один вопрос сколько ти занимаешся програмированиям(веб) и кто ти такой ти правда крут
С 2005 года.
как мы напишем это все😤
Ручками ☝️