Сегодня мы создадим крутую 3D сцену с использованием HTML, CSS и JavaScript. Мы рассмотрим интересные приёмы вёрстки - создадим эффектный анимированный фон, переливающееся освещение сцены, 3D эффект вращения айтемов.

YouTube: https://youtu.be/eBbrEQw7kcg
VK: https://vk.com/video-90356326_456239510

В этом уроке мы рассмотрим создание сайта с различными эффектами, анимациями. Галерея будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений.

YouTube: https://youtu.be/TX1HZnhJLGM
VK: https://vk.com/video-90356326_456239508

В этом уроке мы рассмотрим создание сайта с потрясающей 3D анимацией скролла, используя возможности современного HTML, CSS и JavaScript. Мы разработаем модель движения слайдов в глубину, а также поработаем с аудио и видео контентом на странице.

YouTube: https://youtu.be/GLbI7BGdQ3o
VK: https://vk.com/video-90356326_456239507

В этом уроке мы рассмотрим создание сайта с плавной анимацией, реализуем самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode).

YouTube: https://youtu.be/kyoTYFTLm8A
VK: https://vk.com/video-90356326_456239506

В этом уроке мы рассмотрим создание красивого сайта с Parallax эффектом при скролле. Ключевой особенностью данного примера является реализация эффекта Parallax на сайте.

YouTube: https://youtu.be/F5ZKI-g-_qo
VK: https://vk.com/video-90356326_456239511

В этом уроке мы создадим интересный крутой сайт-портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS. Также мы разработаем CSS анимацию инерции для скролла.

YouTube: https://youtu.be/oT0FN1PtmRU
VK: https://vk.com/video-90356326_456239505

В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену.

YouTube: https://youtu.be/QFq6PiZ1BQ8
VK: https://vk.com/video-90356326_456239504

Сегодня мы рассмотрим создание сайта с крутой анимацией скролла при помощи GSAP ScrollTrigger и GSAP ScrollSmoother.

YouTube: https://youtu.be/zKjYfxei5vc
VK: https://vk.com/video-90356326_456239509

В этом уроке мы рассмотрим создание сайта с красивым 3D эффектом. Ключевой особенностью данного примера является реализация эффекта глубины на сайте посредством 3D перспективы.

YouTube: https://youtu.be/2tAPxjcGLms
VK: https://vk.com/video-90356326_456239512

В этом уроке мы рассмотрим создание сайта с красивой 3D анимацией волны при наведении мыши на чистом HTML и CSS. Главный замысел урока - показать возможности стилизации соседних элементов в CSS.

YouTube: https://youtu.be/3bLmhwU6ses
VK: https://vk.com/video-90356326_456239499

В этом уроке мы рассмотрим создание сайта с красивым эффектом при скролле. Ключевой особенностью данного примера является реализация синхронной анимации посредством использования библиотеки GSAP.

YouTube: https://youtu.be/gQFZyN-0NxQ
VK: https://vk.com/video-90356326_456239502

В этом уроке мы рассмотрим создание красивого сайта с анимацией заголовка при скролле. Я покажу, как происходит создание таких крутых сайтов и на реальном прмере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация анимации заголовка на сайте посредством CSS transition.

YouTube: https://youtu.be/I4NdTuDfJBk
VK: https://vk.com/video-90356326_456239500

Всем привет, друзья! Добро пожаловать в большой комплексный курс по веб-дизайну.

Курс: https://webdesign-master.ru/courses/webdesign/
Анонс на YouTube: https://youtu.be/Ki5VISmGxmI
Анонс VK: https://vk.com/video-90356326_456239485

Мы изучим историю веб-дизайна, основы, весь софт, который понадобится в работе: Figma, Photoshop, редакторы векторной графики и полезные утилиты. Мы задействуем все возможности современных инструментов и нейросетей, которые помогут нам создавать потрясающие крутые работы.

В этом уроке мы рассмотрим создание красивого сайта с Parallax эффектом при движении мыши. Это лучшая CSS практика в одном уроке - мы затронем очень много интересных приемов, это импорт и работа с переменными из JavaScript, создание светлой и темной темы, использование вложенных переменных CSS и математические операции над ними. Очень много логики, очень много функциональной составляющей данного примера ложится именно на CSS. Это мощный и интересный урок, в котором вы обязательно найдете для себя много нового.

YouTube: https://youtu.be/eJfHZl9LsDI
VK: https://vk.com/video-90356326_456239497

В этом уроке мы рассмотрим создание красивого интерактивного компонента галереи-аккордеона. Это крутой пример современного UI-компонента, который можно использовать в галереях, портфолио или как элемент навигациии на сайте или в приложении. В процессе изучения урока, мы затронем очень важные моменты разработки, такие, как поддержка светлой и темной темы, работу с Flexbox, переменными CSS, адаптацией Flex-элементов для мобильных устройств, работу с color-mix, flex-grow и многие другие важные аспекты.

YouTube: https://youtu.be/Hrm_fiUyeGU
VK: https://vk.com/video-90356326_456239517

Добро пожаловать в большой комплексный курс по языку программирования JavaScript.

Курс: https://webdesign-master.ru/courses/javascript/
Анонс на YouTube: https://youtu.be/PPru4M40IIY
Анонс VK: https://vk.com/video-90356326_456239519

В данном курсе мы максимально подробно, разбирая каждый шаг и каждый момент, изучим язык JavaScript с полного нуля. Курс отлично подойдёт тем, кто хочет получить актуальную, крутую базу, перед тем как двигаться дальше и изучать современные библиотеки и фреймворки.

В этом уроке мы рассмотрим создание красивого сайта с анимацией прокрутки. Мы научимся не просто верстать макет из Figma, но также рассмотрим множество нюансов правильной реализации подобных проектов — от дизайна до готового результата.

YouTube: https://youtu.be/NFyiraqEMnI
VK: https://vkvideo.ru/video-90356326_456239520

Основные и важнейшие задачи данного урока — это научиться создавать сайты с поддержкой светлой и темной темы, адаптивный дизайн, практика современной веб-разработки. Для слайдера с изображениями мы добавим CSS анимацию, которая позволит красиво выделять центральный блок среди остальных.

В этом уроке мы рассмотрим создание красивого сайта с плавающими карточками при движении мыши в качестве фона. Мы научимся решать нестандартные интересные задачи в веб-разработке, используя возможности современного CSS и JavaScript.

YouTube: https://youtu.be/ASvbTVBCUn0
VK: https://vkvideo.ru/video-90356326_456239521

Ключевые особенности данного урока - это параллакс эффект между карточками при движении мыши, эффекты при наведении и плавный скролл. Но самое главное - это реализация умного алгоритма размещения карточек. При загрузке или обновлении сайта, карточки выстраиваются автоматически в рандомном порядке, не перекрывая друг друга. Учитывается максимальное количество элементов, которые могут быть помещены в шапке сайта. Кроме того, мы реализуем модель, которая раздает рандомные размеры карточкам и рандомную глубину в пространстве со следующей логикой - чем меньше объект, тем он дальше в parallax сцене. Также мы реализуем возможность плавного скролла, параллакс эффект и плавное растворение.

В этом уроке мы создадим дизайн сайта «Dark Interior» в Figma. Научимся работать с системой сеток, направляющими, элементами Auto Layout, стилями и изучим другие возможности Figma на реальном примере.

YouTube: https://youtu.be/Sjx7s0-p9qk
VK: https://vk.com/video-90356326_456239522

Всем привет, дорогие друзья!
На YT канале «WebDesign Master» вышел новый большой урок по созданию адаптивного сайта с анимацией аккордеона, градиентным фоном и параллакс эффектом для фотографий. Мы будем использовать современный инструмент для создания веб-анимаций GSAP и реализуем плавный скролл с помощью Lenis.

Всем привет, друзья!
На YT канале «WebDesign Master» вышел новый большой урок по созданию красивого сайта с анимацией 3D глубины при скролле и синхронизацией прокрутки с карточками товаров. Ключевая особенность данного примера заключается в том, что 3D анимация у нас выполнена на чистом CSS. Современный CSS удивляет своими возможностями и в этом примере мы раскроем одну из его сторон - возможность создания потрясающих анимаций, без использования библиотек.