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