Barbershop - Old Schol Новый промо-сайт. Микроанимация элементов Загрузка страниц Переходы Эффекты

Оглавление
Новый промо сайт (описание проекта)
Прелоадер
Дизайн система
Транзишены
Ховеры
Скроллинг

Новый промо сайт
Цель - сделать эффектный промо сайт для барбершопа Old Schol. Сейчас это устаревший Landing Page - barbershopoldschool.ru
Сайт будет содержать страницы: Услуги, Барберы, Магазин, Академия, Новости и статьи.
Особое внимание к контенту, мелочам, деталям.
То что есть сейчас (тестовый домен): http://oldschool.tech-toplife.ru

Прелоадер
Так как главная страница содержит множество элементов, блоков которые будут подгружаться с эффектами. Используем Прилоадер при загрузке сайта. Идея того как он будет работать (берем ЛОГО):
- Плавно проявляется область 1. (или сразу)
- Загрузка показывается движением линии с лева на право (как при загрузке игр.) и далее закрашиваются белым (становятся видны) буквы фразы BARBERSHOP

Элементы дизайн системы
Опишем элементы на которых будут базироваться страницы
Оранжевая полоса:

Элементы дизайн системы
Линии:

Транзишены
Плавные переходы между блоками, страницами, выпадающие блоки.
Переключение в табах:

Ховеры

Ховеры

Ховеры
Так как привью товаров (текст) мелкий.
Есть идея сделать увеличение, но не просто всей привьюшки карточки. А вот так:
https://dribbble.com/shots/5473124-Hurley
Это еще не реализовали, но для товара на вкладке волосы
убрали прозрачность -

Ховеры
При наведении на видео – оно вкл. Когда мышка уходит из области – выкл.
Еще будет эффект связанный с самой мышкой (кругом) например:
https://www.ottografie.nl/beauty/wired/

Скроллинг
Стандартный скроллинг в окне браузера (тот что справа) – хотим пересмотреть. И сделать что-то подобное: https://affinity.pt/en/
Когда пользователь перестает скролить – он исчезает (плавно) и появляется так же при скролинге. Плюслм будет для работы меню.