---

Видео на тему: WebDesign Master - видео

💥 Начать обучение WordPress: https://webdesign-master.ru/courses/wordpress/ Добро пожаловать в новый курс «Создание сайта на WordPress от А до Я». В данном курсе мы пройдем путь от чистой установки движка до запуска мощного коммерческого проекта. Мы на практике разработаем уникальный сайт с интернет-магазином на WooCommerce, современным дизайном и полным функционалом. Вы научитесь создавать уникальные проекты, которые будут действительно востребованы на рынке коммерческой разработки. #WordPress #WooCommerce #созданиесайта #вебразработка #интернетмагазин💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание красивого 3D сайта с использованием библиотеки Three.js. Современная веб-разработка удивляет своими возможностями, и в этом примере мы раскроем одну из её граней - создание потрясающих атмосферных анимаций на основе WebGL. Страница урока: https://webdesign-master.ru/blog/html-css/threejs-parallax-lesson.html Таймкоды: 00:00 Начало урока 01:36 Обзор материалов урока 02:21 Подготовка к разработке 04:37 Подготовка сцены в Blender 05:41 Базовая HTML разметка 06:26 Базовая CSS стилизация 08:30 Создание сцены в Three.js 26:24 Базовая цветокоррекция 28:20 Добавление тумана в Three.js 30:34 Добавление виньетки 31:59 Цветокор с помощью CSS 33:22 Работа с освещением 37:01 FXAA сглаживание 38:48 Виньетирование в Three.js 41:42 Создание прелоадера 46:32 Создание UI интерфейса 52:34 Реализация плавного скролла 54:12 Parallax эффект при скролле 1:01:16 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ Сегодня мы подробно изучим крутой инструмент для создания дизайна - Pixso. Это полный курс от А до Я для начинающих, в котором мы изучим все возможности инструмента, не упуская ни одной детали, а также разработаем крутой практический пример для закрепления знаний. Материалы и готовый результат: https://webdesign-master.ru/blog/web-design/pixso-course.html Pixso: https://pixso.net/ru?utm_source=rutube&utm_medium=influencer&utm_campaign=tutorial&utm_content=webdesignmaster Таймкоды: ОСНОВЫ: 00:00 Вступление 00:45 Установка 01:13 Настройка 02:42 Стартовый экран 06:20 Основной интерфейс 06:30 Пресеты фреймов 07:28 Расшарить документ 08:28 Основные элементы интерфейса 08:54 ВЕРХНЯЯ ПАНЕЛЬ 13:35 Масштабирование и просмотр 17:06 Сетка и привязка 19:12 ЛЕВАЯ ПАНЕЛЬ 19:46 Работа со слоями 22:35 Группировка объектов 23:37 Основы Auto Layout 28:39 НИЖНЯЯ ПАНЕЛЬ 29:53 Добавление комментариев 31:22 Помощь ГОРЯЧИЕ КЛАВИШИ: 31:41 Просмотр всех горячих клавиш 32:08 Важные сочетания клавиш 32:11 Горячие клавиши Tool (Инструменты) 36:15 Горячие клавиши View (Просмотр) 39:00 Горячие клавиши Scale (Масштабирование и просмотр) 40:46 Горячие клавиши Text (Работа с текстом) 43:55 Прочие клавиши - Vector, Layer, Edit, Select и тд. 55:46 Рекомендации по горячим клавишам ПРАВАЯ ПАНЕЛЬ: 56:21 Задача Правой панели 58:03 Настройки Правой панели 1:00:44 Настройки Экспорта 1:01:10 Центрирование и выравнивание 1:02:22 Layout Grid (Кастомная сетка) 1:07:22 Local Styles (Стили) 1:11:33 Local Tokens (Токены дизайна) 1:12:12 Реализация светлой и темной темы 1:17:45 Реализация мультиязычного интерфейса 1:21:30 Сценарии использования Токенов дизайна 1:22:09 Настройка токенов для Dev View (DevMode) 1:23:48 КОМПОНЕНТЫ ПРАКТИЧЕСКИЙ ПРИМЕР: 1:28:47 Приступаем к практике 1:29:04 Настройка Фрейма 1:29:36 Настройка Токенов 1:31:55 Фрейм для компонентов 1:32:38 Создания компонента Кнопки 1:37:45 Варианты компонента 1:44:46 Шрифтовой ассистент (Локальные шрифты) 1:46:12 Настройка вариантов компонента 1:49:40 Настройка системы сеток 1:50:11 Создание декоративных лучей 1:52:34 Создание Top Line с Background Blur 1:59:46 Создание Логотипа 2:19:21 Адаптивный Auto Layout в Top Line 2:22:28 Создание верхнего меню 2:28:45 Доработка кнопок 2:31:41 Создание компонента Переключателя 2:38:17 Создание компонента Карточки 2:49:14 Сборка интерфейса 3:00:11 Видео-анимация в дизайне 3:05:16 GIF-анимация в дизайне 3:07:33 Создание градиентного фона 3:11:59 Размещение карточек в дизайне 3:19:21 Анимация фона при клике 3:24:24 Импорт готового результата 3:24:45 Заключение ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Начать обучение Three.js: https://webdesign-master.ru/courses/threejs/ Добро пожаловать в новый курс «Three.js. Большой практический курс». В данном курсе мы подробно изучим популярную библиотеку для работы с 3D-графикой в веб-разработке Three.js. От самых основ до подготовки моделей в Blender и создания потрясающего интерактивного примера.💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание красивого сайта с анимацией 3D глубины при скролле и синхронизацией прокрутки с карточками товаров. Ключевая особенность данного примера заключается в том, что 3D анимация у нас выполнена на чистом CSS. Современный CSS удивляет своими возможностями и в этом примере мы раскроем одну из его сторон - возможность создания потрясающих анимаций, без использования библиотек. Страница урока: https://webdesign-master.ru/blog/html-css/perspective-scroll-lesson.html Таймкоды: 00:00 Начало урока 01:30 Обзор материалов урока 02:25 Приступаем к созданию сайта 08:07 Базовая разметка и CSS стилизация 09:57 HTML разметка и стилизация карусели 20:17 HTML разметка и стилизация товаров 32:59 CSS анимация при прокрутке 55:20 Оформление логотипа и текста 1:00:03 Адаптивность сайта 1:05:07 Плавный скролл 1:07:34 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание адаптивного сайта с красивой анимацией аккордеона, переливающимся градиентным фоном и параллакс эффектом фотографий. Мы будем использовать современный инструмент для создания веб-анимаций GSAP и реализуем плавный скролл с помощью Lenis. Страница урока: https://webdesign-master.ru/blog/html-css/lightsport-lesson.html Таймкоды: 00:00 Начало урока 09:20 Верхняя линия сайта 1:20:40 Аккордеон 2:06:15 Галерея 2:23:03 Плавный скролл 2:28:20 Адаптивность 2:45:05 Анимированный фон 3:17:02 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы создадим дизайн сайта «Dark Interior» в Figma. Научимся работать с системой сеток, направляющими, элементами Auto Layout, стилями и изучим другие возможности Figma на реальном примере. Материалы урока: https://webdesign-master.ru/blog/html-css/dark-interior-lesson.html Верстка макета (HTML CSS JavaScript): https://rutube.ru/video/2961f72bea1150a3299921e8a839337a/ ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание красивого сайта с анимацией прокрутки. Мы научимся не просто верстать макет из Figma, но также рассмотрим множество нюансов правильной реализации подобных проектов — от дизайна до готового результата. Основные и важнейшие задачи данного урока — это научиться создавать сайты с поддержкой светлой и темной темы, адаптивный дизайн, практика современной веб-разработки. Для слайдера с изображениями мы добавим CSS анимацию, которая позволит красиво выделять центральный блок среди остальных. Материалы урока: https://webdesign-master.ru/blog/html-css/dark-interior-lesson.html Таймкоды: 00:00:00 — Начало урока 00:02:04 — Материалы урока 00:06:35 — Настройка проекта 00:25:33 — Верстка top-line 01:24:23 — Верстка контента 01:32:22 — Слайдер 01:55:06 — Навигация 02:13:09 — PerfectPixel 02:18:25 — Адаптивность 02:28:02 — Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание красивого сайта с плавающими карточками при движении мыши в качестве фона. Мы научимся решать нестандартные интересные задачи в веб-разработке, используя возможности современного CSS и JavaScript. Ключевые особенности данного урока - это параллакс эффект между карточками при движении мыши, эффекты при наведении и плавный скролл. Но самое главное - это реализация умного алгоритма размещения карточек. При загрузке или обновлении сайта, карточки выстраиваются автоматически в рандомном порядке, не перекрывая друг друга. Учитывается максимальное количество элементов, которые могут быть помещены в шапке сайта. Кроме того, мы реализуем модель, которая раздает рандомные размеры карточкам и рандомную глубину в пространстве со следующей логикой - чем меньше объект, тем он дальше в parallax сцене. Также мы реализуем возможность плавного скролла, параллакс эффект и плавное растворение. Материалы урока: https://webdesign-master.ru/blog/html-css/events-lesson.html Таймкоды: 00:00:00 — Начало урока 00:02:11 — Материалы урока 00:02:40 — Приступаем к созданию 00:08:54 — HTML разметка 00:15:44 — CSS стилизация 00:28:29 — Практика JavaSctipt 01:12:30 — Глубина сцены 01:16:52 — Плавный скролл 01:22:21 — Параллакс эффект 01:25:58 — Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Начать обучение JavaScript: https://webdesign-master.ru/courses/javascript/ Добро пожаловать в большой комплексный курс по языку программирования JavaScript. В данном курсе мы максимально подробно, разбирая каждый шаг и каждый момент, изучим язык JavaScript с полного нуля. Курс отлично подойдёт тем, кто хочет получить актуальную, крутую базу, перед тем как двигаться дальше и изучать современные библиотеки и фреймворки.💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание красивого интерактивного компонента галереи-аккордеона. Это крутой пример современного UI-компонента, который можно использовать в галереях, портфолио или как элемент навигациии на сайте или в приложении. В процессе изучения урока, мы затронем очень важные моменты разработки, такие, как поддержка светлой и темной темы, работу с Flexbox, переменными CSS, адаптацией Flex-элементов для мобильных устройств, работу с color-mix, flex-grow и многие другие важные аспекты. Страница урока: https://webdesign-master.ru/blog/html-css/accordion-cards.html Таймкоды: 00:00 Начало урока 01:00 Обзор материалов урока 01:40 Создание структуры проекта 02:30 Подключаем файлы CSS и JavaScript 03:56 Включаем поддержку светлой и темной темы 05:28 HTML верстка сайта (вся разметка) 09:06 Приступаем к CSS стилизации 12:31 CSS стилизация светлой и темной темы 17:57 Выравнивание по центру CSS 18:16 Создание элементов аккордеона 22:56 Углубляемся в JavaScript 27:20 Активация элемента при клике 31:56 Как работает наш JavaScript код 35:26 Работа с цветами в color-mix CSS 37:43 Добавляем CSS анимацию переключения 40:22 Адаптация под мобильные устройства 42:43 Наполняем галерею изображениями 44:00 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта с красивым 3D эффектом. Сегодня я покажу, как происходит создание таких крутых сайтов и подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация эффекта глубины на сайте посредством 3D перспективы. Вы удивитесь, насколько просто и быстро можно разрабатывать подобные вещи, используя современный CSS. Страница урока: https://webdesign-master.ru/blog/html-css/parallax-3d-lens-effect-website.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 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание красивого сайта с Parallax эффектом при скролле. Сегодня я покажу, как происходит разработка таких крутых сайтов и подробно объясню каждый шаг. Ключевой особенностью данного примера является, конечно-же, реализация эффекта Parallax на сайте. Вы удивитесь, насколько просто и быстро можно делать подобные вещи, используя современный CSS. Страница урока: https://webdesign-master.ru/blog/html-css/parallax-scrolling-website.html Таймкоды: 00:00 Начало урока 01:57 Обзор материалов урока 02:49 Подготовка изображений для Parallax эффекта в CSS 11:28 Приступаем к HTML верстке сайта 13:49 Подключаем файлы CSS и JavaScript 14:55 HTML верстка сайта (вся разметка) 19:54 Приступаем к CSS стилизации 21:02 Подключение шрифтов CSS 22:50 Стилизация тега body 23:58 Верстка шапки сайта - стили parallax слоев 26:21 Параллакс-эффект с помощью JavaScript 31:11 Логика движения слоев Parallax в CSS 36:39 Верстка заголовков сайта и эффект «свечения» 45:32 Полоса между блоками - решение 50:04 CSS стилизация первой секции сайта 56:32 Создание параллакс эффекта у контента 59:09 Плавная прокрутка страницы JS 1:04:41 Анимация Cubic Bezier для Parallax эффекта в CSS 1:11:00 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта с 3D эффектом вращения, используя HTML, CSS и JavaScript. Мы рассмотрим интересные приёмы вёрстки - создадим эффектный анимированный фон, переливающееся освещение сцены, 3D эффект вращения и разработаем кастомный эффект переключения слайдов на сайте с помощью cubic-bezier. Страница урока: https://webdesign-master.ru/blog/html-css/showcase-3d-effect.html Таймкоды: 00:00 Начало урока 01:07 Обзор материалов урока 08:25 Размещаем код в редакторе 09:41 Подключаем библиотеку слайдера 10:39 Настраиваем проект 12:19 Приступаем к HTML верстке 13:56 Верстка видео в качестве фона на сайте 17:17 Создание виньетки на CSS 18:27 Верстка освещения 3D сцены, анимация 21:45 Определяем контейнер для слайдера 23:12 Добавляем эффект Glow в сцену 25:37 HTML верстка заголовка 27:53 Верстка карусели Swiper 29:55 Левая и правая части 3D изображения 33:13 Вычисляем высоту с помощью CSS calc() 34:33 Продолжаем верстать 3D изображения 36:23 CSS стилизация активного айтема карусели 39:26 Наполняем сцену актуальными слайдами 40:34 Кастомная CSS анимация cubic-bezier 42:14 Добавляем тень моделям с помощью CSS 44:47 Верстка надписей айтемов 46:46 Создаем 3D эффект на CSS, анимация 52:32 Ширина слайдера на разных разрешениях 53:57 Full Page навигация карусели 1:01:50 Кастомная анимация перелистывания Swiper ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта с крутой анимацией скролла при помощи GSAP ScrollTrigger и GSAP ScrollSmoother. Страница урока: https://webdesign-master.ru/blog/html-css/creative-scroll-website.html Таймкоды: 00:00 Начало урока 02:20 Обзор материалов и подготовка графики 06:05 Приступаем к HTML верстке сайта 07:49 Подключаем файлы CSS и JavaScript 11:34 Создание главного экрана сайта 31:57 HTML верстка галереи портфолио 38:28 CSS стилизация портфолио на сайте 48:19 Плавная прокрутка страницы на JS 52:35 Управление эффектами при скролле 59:47 Работа сайта на мобильных устройствах 1:01:01 Анимация элементов при скролле 1:15:29 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта с CSS эффектами и анимацией. Сайт будет выполнена с эффектом Parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом размытия. Страница урока: https://webdesign-master.ru/blog/html-css/create-cool-gallery-miami.html Таймкоды: 00:00 Начало урока 01:02 Подготовка к верстке 02:00 Базовая HTML-разметка 02:54 Инициализация JS-библиотеки 03:26 CSS-стилизация страницы 04:07 Подключение шрифта CSS 04:46 Общие стили документа html, body 05:26 Размер шрифта в зависимости от экрана 06:58 Первые параметры JS-библиотеки 07:52 Адаптивный слайдер 08:58 Наклон блока CSS rotate 10:11 Прокрутка блока на скролл и анимация 11:21 Анимация cubic-bezier 12:53 Верстка изображений с Parallax эффектом 15:54 Оптимизация CSS анимации с помощью will-change 17:15 Настройка глубины Parallax эффекта 17:51 Синхронизация двух слайдеров 20:23 Насыщенность через CSS и Blur эффект 22:33 Анимация открытия и закрытия 26:06 Верстка текста адаптивного размера 28:21 Градиент текста с помощью CSS 29:27 Триггер для анимации текста при скролле 31:34 Анимация скрытия текстового блока 33:48 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта с потрясающей 3D анимацией скролла, используя возможности современного HTML, CSS и JavaScript. Мы разработаем модель движения слайдов в глубину, поработаем над кастомной анимацией, плавностью, красиво оформим композицию с помощью CSS, а также поработаем с аудио и видео контентом на странице. Страница урока: https://webdesign-master.ru/blog/html-css/create-3d-scroll-site.html Таймкоды: 00:00 Начало урока 00:39 Обзор материалов урока 04:18 Подготовка к верстке сайта 05:25 Базовая HTML разметка и CSS стилизация 08:31 Подключение и настройка шрифтов 11:09 Стилизация контейнера и фреймов 13:56 Пишем движок 3D скролла на JavaScript 25:23 CSS анимация cubic-bezier 27:26 Антиалиасинг через transform-style 27:50 Верстка контента 29:46 Верстка изображений 35:18 Верстка видео (горизонтальный контент) 38:13 Умный перенос min-content 39:11 Оформление видео 41:35 Расстояние между фреймами 42:02 Верстка заголовков и текста 44:09 Верстка остального контента 48:52 Работа с аудио на странице 56:30 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта с плавной анимацией, реализуем самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode). Кроме того, я покажу, как правильно разрабатывать прелоадер для подобных сайтов. Страница урока: https://webdesign-master.ru/blog/html-css/create-draggable-site.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 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения в различных направлениях с помощью CSS. При наведении слайды на сайте будут увеличиваться с красивой анимацией. Также мы разработаем CSS анимацию инерции для скролла. Страница урока: https://webdesign-master.ru/blog/html-css/amazing-scroll-portfolio.html Таймкоды: 00:00 Начало урока 01:09 Обзор материалов урока 01:46 Приступаем к HTML верстке сайта 03:17 Подключаем файлы CSS и JavaScript 04:58 HTML верстка сайта (первый слайд) 08:51 Инициализация JavaScript библиотеки 11:03 Приступаем к CSS стилизации 12:00 Стилизация контейнера и элементов 13:36 HTML верстка сайта (вся разметка) 14:56 Оптимизация JavaScript кода 17:48 Синхронизация слайдеров Swiper 18:48 Определение переменных CSS 20:20 Стилизация слайдов портфолио 25:08 Анимация инерции cubic-bezier 26:10 Продолжаем CSS стилизацию 28:36 Анимация при наведении 30:46 Верстка изображений портфолио 32:08 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/ В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену. Я покажу самый простой и универсальный способ как создать сайт с параллакс эффектом, который вы с легкостью сможете использовать в ваших проектах. Страница урока: https://webdesign-master.ru/blog/html-css/horizontal-parallax-scrolling.html Таймкоды: 00:00 Начало урока 01:28 Обзор материалов урока 02:26 Подготовка изображений для Parallax эффекта 18:37 Приступаем к HTML верстке сайта 18:54 Подключаем файлы CSS и JavaScript 21:06 Базовая HTML верстка сайта 24:20 Приступаем к CSS стилизации 24:46 Стилизация экранов для скролла 26:21 Логика движения параллакс слоев 27:33 Универсальные HTML атрибуты для Parallax 33:33 Эффект виньетки с помощью CSS 35:10 Для чего нужен transform-style: preserve-3d 36:36 Добавляем частицы с помощью canvas JS 40:06 Свободный скроллинг сайта free mode 44:27 Как сделать вертикальный параллакс сайт 45:41 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb