Иммерсивный люксовый лендинг для бренда селективной парфюмерии
Премиальный иммерсивный лендинг для вымышленного бренда селективной парфюмерии “NOIRE ATLAS”.
Проект реализован в стиле темного люксового минимализма, вдохновленного сайтами-победителями Awwwards. Главный акцент сделан на сложной интерактивной анимации, атмосферном визуале и эффекте плавного погружения (сторителлинг).
Что реализовано:
- Брендированный прелоадер с процентным счетчиком и эффектом раздвижного экрана
- Кастомный интерактивный курсор, который изменяет размер и показывает подсказки при наведении на элементы
- Фоновая Canvas-анимация дыма в Hero-блоке, которая физически реагирует на движения мыши
- Горизонтальный скролл-слайдер для линейки ароматов с встроенным параллаксом изображений
- Генеративные Canvas-визуализации ольфакторных профилей (каждый аромат имеет собственную уникальную интерактивную фигуру)
- Магнитный эффект для кнопок (элементы мягко притягиваются к курсору при приближении)
- Полная адаптивность (на смартфонах горизонтальный скролл плавно переходит в вертикальную ленту)
- Оптимизированный код без лишних библиотек - весь интерфейс и логика работают из одного файла
Технологии: HTML5 Canvas, CSS (Vanilla), JavaScript, GSAP, ScrollTrigger
Проект реализован в стиле темного люксового минимализма, вдохновленного сайтами-победителями Awwwards. Главный акцент сделан на сложной интерактивной анимации, атмосферном визуале и эффекте плавного погружения (сторителлинг).
Что реализовано:
- Брендированный прелоадер с процентным счетчиком и эффектом раздвижного экрана
- Кастомный интерактивный курсор, который изменяет размер и показывает подсказки при наведении на элементы
- Фоновая Canvas-анимация дыма в Hero-блоке, которая физически реагирует на движения мыши
- Горизонтальный скролл-слайдер для линейки ароматов с встроенным параллаксом изображений
- Генеративные Canvas-визуализации ольфакторных профилей (каждый аромат имеет собственную уникальную интерактивную фигуру)
- Магнитный эффект для кнопок (элементы мягко притягиваются к курсору при приближении)
- Полная адаптивность (на смартфонах горизонтальный скролл плавно переходит в вертикальную ленту)
- Оптимизированный код без лишних библиотек - весь интерфейс и логика работают из одного файла
Технологии: HTML5 Canvas, CSS (Vanilla), JavaScript, GSAP, ScrollTrigger