Слайд 2Оглавление
Новый промо сайт (описание проекта)
Прелоадер
Дизайн система
Транзишены
Ховеры
Скроллинг
![Оглавление Новый промо сайт (описание проекта) Прелоадер Дизайн система Транзишены Ховеры Скроллинг](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-1.jpg)
Слайд 3Новый промо сайт
Цель - сделать эффектный промо сайт для барбершопа Old
![Новый промо сайт Цель - сделать эффектный промо сайт для барбершопа Old](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-2.jpg)
Schol. Сейчас это устаревший Landing Page - barbershopoldschool.ru
Сайт будет содержать страницы: Услуги, Барберы, Магазин, Академия, Новости и статьи.
Особое внимание к контенту, мелочам, деталям.
То что есть сейчас (тестовый домен): http://oldschool.tech-toplife.ru
Слайд 4Прелоадер
Так как главная страница содержит множество элементов, блоков которые будут подгружаться с
![Прелоадер Так как главная страница содержит множество элементов, блоков которые будут подгружаться](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-3.jpg)
эффектами. Используем Прилоадер при загрузке сайта. Идея того как он будет работать (берем ЛОГО):
- Плавно проявляется область 1. (или сразу)
- Загрузка показывается движением линии с лева на право (как при загрузке игр.) и далее закрашиваются белым (становятся видны) буквы фразы BARBERSHOP
Слайд 5Элементы дизайн системы
Опишем элементы на которых будут базироваться страницы
Оранжевая полоса:
![Элементы дизайн системы Опишем элементы на которых будут базироваться страницы Оранжевая полоса:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-4.jpg)
Слайд 6Элементы дизайн системы
Линии:
![Элементы дизайн системы Линии:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-5.jpg)
Слайд 7Транзишены
Плавные переходы между блоками, страницами, выпадающие блоки.
Переключение в табах:
![Транзишены Плавные переходы между блоками, страницами, выпадающие блоки. Переключение в табах:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-6.jpg)
Слайд 10Ховеры
Так как привью товаров (текст) мелкий.
Есть идея сделать увеличение, но не просто
![Ховеры Так как привью товаров (текст) мелкий. Есть идея сделать увеличение, но](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-9.jpg)
всей привьюшки карточки. А вот так:
https://dribbble.com/shots/5473124-Hurley
Это еще не реализовали, но для товара на вкладке волосы
убрали прозрачность -
Слайд 11Ховеры
При наведении на видео – оно вкл. Когда мышка уходит из области
![Ховеры При наведении на видео – оно вкл. Когда мышка уходит из](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-10.jpg)
– выкл.
Еще будет эффект связанный с самой мышкой (кругом) например:
https://www.ottografie.nl/beauty/wired/
Слайд 12Скроллинг
Стандартный скроллинг в окне браузера (тот что справа) – хотим пересмотреть.
![Скроллинг Стандартный скроллинг в окне браузера (тот что справа) – хотим пересмотреть.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1142764/slide-11.jpg)
И сделать что-то подобное: https://affinity.pt/en/
Когда пользователь перестает скролить – он исчезает (плавно) и появляется так же при скролинге. Плюслм будет для работы меню.