- 152
- 15 382 168
WebDesign Master
Приєднався 12 гру 2009
Уникальные авторские уроки и курсы по созданию сайтов, профессиональной верстке и современному веб-дизайну.
Создание сайта с красивой анимацией при скролле (HTML CSS JavaScript)
Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: wd-m.ru/createsite
В этом уроке мы рассмотрим создание сайта с красивым эффектом при скролле. Сегодня я покажу, как происходит создание таких красивых сайтов и на реальном примере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация синхронной анимации посредством использования библиотеки GSAP.
Страница урока (результат, исходники): webdesign-master.ru/blog/html-css/background-animation-website.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
Создание сайта от А до Я: wd-m.ru/createsite
В этом уроке мы рассмотрим создание сайта с красивым эффектом при скролле. Сегодня я покажу, как происходит создание таких красивых сайтов и на реальном примере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация синхронной анимации посредством использования библиотеки GSAP.
Страница урока (результат, исходники): webdesign-master.ru/blog/html-css/background-animation-website.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
Переглядів: 32 961
Відео
Создание красивого сайта с 3D эффектом при скролле (HTML + CSS)
Переглядів 10 тис.2 місяці тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание сайта с красивым 3D эффектом при скролле. Сегодня я покажу, как происходит создание таких крутых сайтов на реальном примере. Ключевой особенностью данного урока является реализация 3D эффекта при скролле на сайте посредством чистого CSS. Страница урока (результат, исходни...
Создание красивого сайта с 3D анимацией волны (HTML + CSS)
Переглядів 17 тис.3 місяці тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание сайта с красивой 3D анимацией волны при наведении мыши на чистом HTML и CSS. Главный замысел урока - показать возможности стилизации соседних элементов в CSS. Немногие знают, что стилизовать можно не только последующие элементы, посредством использования плюс, но и предыд...
Создание красивого сайта с 3D эффектом Parallax (HTML + CSS)
Переглядів 564 тис.Рік тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание сайта с красивым 3D эффектом. Сегодня я покажу, как происходит создание таких крутых сайтов и подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация эффекта глубины на сайте посредством 3D перспективы. Вы удивите...
Создание сайта с крутой анимацией скролла (HTML CSS JavaScript)
Переглядів 289 тис.Рік тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite Сегодня мы рассмотрим создание сайта с крутой анимацией скролла при помощи GSAP ScrollTrigger и GSAP ScrollSmoother. Страница урока (результат, исходники): webdesign-master.ru/blog/html-css/creative-scroll-website.html Таймкоды: 00:00 Начало урока 02:20 Обзор материалов и подготовка графики 06:05 Приступаем...
Создание сайта с горизонтальным Parallax эффектом (HTML CSS JavaScript)
Переглядів 59 тис.Рік тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену. Я покажу самый простой и универсальный способ как создать сайт с параллакс эффектом, который вы с легкостью сможете использ...
Создание сайта портфолио с крутой анимацией (HTML CSS JavaScript)
Переглядів 78 тис.Рік тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы создадим интересный крутой сайт-портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения в различных направлениях с помощью CSS. При наведении слайды будут увеличиваться с красивой анимацией. Также мы разработа...
Создание красивого сайта с Parallax эффектом при скролле (HTML CSS JavaScript)
Переглядів 736 тис.Рік тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание красивого сайта с Parallax эффектом при скролле. Сегодня я покажу, как происходит разработка таких крутых сайтов и подробно объясню каждый шаг. Ключевой особенностью данного примера является, конечно-же, реализация эффекта Parallax на сайте. Вы удивитесь, насколько просто...
Создание сайта с плавной анимацией перемещения (HTML + CSS)
Переглядів 95 тис.2 роки тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание сайта с плавной анимацией, реализуем самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode). Кроме того, я покажу, как правильно разрабатывать прелоадер для подобных сайтов. Решение для мобильных устройс...
Создание крутого 3D сайта с анимацией прокрутки (HTML CSS JavaScript)
Переглядів 126 тис.2 роки тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание сайта с потрясающей 3D анимацией скролла, используя возможности современного HTML, CSS и JavaScript. Мы разработаем модель движения слайдов в глубину, поработаем над кастомной анимацией, плавностью, красиво оформим композицию с помощью CSS, а также поработаем с аудио и ви...
Создание потрясающей галереи на HTML, CSS и JavaScript (CSS-анимация, Blur, Parallax, Gradient)
Переглядів 145 тис.2 роки тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite В этом уроке мы рассмотрим создание сайта с различными эффектами, анимациями. Галерея будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета...
Создание крутой 3D сцены (HTML + CSS) с эффектным дизайном
Переглядів 442 тис.2 роки тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite Сегодня мы создадим крутую 3D сцену с использованием HTML, CSS и JavaScript. Мы рассмотрим интересные приёмы вёрстки - создадим эффектный анимированный фон, переливающееся освещение сцены, 3D эффект вращения айтемов и разработаем кастомный эффект переключения слайдов с помощью cubic-bezier. Страница урока (...
Все курсы от WebDesign Master (Комплект)
Переглядів 35 тис.2 роки тому
Страница комплекта: wd-m.ru/bundle Все платные курсы от WebDesign Master в одном комплекте со скидкой. Вы получите более 60 часов полезнейшего актуального контента. Общий объём всех курсов более 120 уроков. Комплект также включает закрытые курсы, которые доступны только в данном комплекте.
Настройка VS Code для верстки
Переглядів 300 тис.2 роки тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite Сегодня мы рассмотрим установку и настройку Visual Studio Code для верстки. В результате мы получим удобную, лаконичную рабочую среду с необходимыми плагинами, которые я использую в своей работе. VS Code в настоящее время является самым популярным редактором кода благодаря широкому функционалу, кроссплатфор...
Simple Starter - простой стартер для верстки сайтов
Переглядів 32 тис.2 роки тому
Все курсы в одном комплекте: wd-m.ru/bundle Создание сайта от А до Я: wd-m.ru/createsite Сегодня мы поговорим о новом стартере для HTML верстки, который я подготовил для будущих уроков и проектов на CMS. Современная коммерческая разработка, на мой взгляд, стала слишком перегружена различными инструментами, сборщиками, менеджерами задач, зависимостями, пакетами и так далее. Думаю, пришло время у...
Создание дизайна сайта в Figma на реальном примере. Большой курс
Переглядів 264 тис.2 роки тому
Создание дизайна сайта в Figma на реальном примере. Большой курс
HTML верстка сайта слайдера и посадка на CMS. Джедай верстки #8 (HTML CSS JavaScript)
Переглядів 38 тис.3 роки тому
HTML верстка сайта слайдера и посадка на CMS. Джедай верстки #8 (HTML CSS JavaScript)
Создание курсора с красивой анимацией (CSS JS GSAP)
Переглядів 40 тис.3 роки тому
Создание курсора с красивой анимацией (CSS JS GSAP)
3D Tilt анимация на JavaScript. Полный цикл разработки
Переглядів 52 тис.3 роки тому
3D Tilt анимация на JavaScript. Полный цикл разработки
Актуальный способ установки и настройки окружения Windows WSL (Windows Subsystem for Linux)
Переглядів 31 тис.3 роки тому
Актуальный способ установки и настройки окружения Windows WSL (Windows Subsystem for Linux)
Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
Переглядів 69 тис.4 роки тому
Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
OptimizedHTML 5 - Облегченный стартер для верстки сайтов
Переглядів 45 тис.4 роки тому
OptimizedHTML 5 - Облегченный стартер для верстки сайтов
Отложенная загрузка изображений Lazy Load на сайте
Переглядів 59 тис.5 років тому
Отложенная загрузка изображений Lazy Load на сайте
HTML верстка слайдера на чистом CSS
Переглядів 25 тис.5 років тому
HTML верстка слайдера на чистом CSS
Использование подсистемы Linux для веб-разработки в Windows (WSL)
Переглядів 90 тис.5 років тому
Использование подсистемы Linux для веб-разработки в Windows (WSL)
Адаптивная HTML верстка вертикального таймлайна
Переглядів 33 тис.6 років тому
Адаптивная HTML верстка вертикального таймлайна
Создание сайта на Jekyll от А до Я. Комплексный курс
Переглядів 88 тис.6 років тому
Создание сайта на Jekyll от А до Я. Комплексный курс
Шикарно!
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses