Лендинги
Первоцвет — цветочная мастерская
Лендинг цветочной мастерской с живым фоном: лепестки разлетаются от курсора, трава внизу раздвигается, а по клику распускается цветок.
Открыть проект
/play/pervotsvet/index.html
Поводите курсором по фону и кликните по пустому месту. Палитру можно сменить в разделе «Палитра», язык и движение фона — в шапке.
Галерея
-
Букеты в каталоге собраны из тех же нарисованных кодом цветов, что и остальной сайт -
Конструктор: цветы добавляются по одному, ваза перестраивает веер, цена пересчитывается сразу -
О проекте
Одностраничный сайт вымышленной мастерской, где фон — не картинка, а четыре системы на одном canvas: падающие лепестки, светящаяся пыльца, трава у нижнего края и цветение по клику. Лепестки расталкиваются курсором, пыльца наоборот к нему тянется, прокрутка добавляет порыв ветра. Три палитры настроения перекрашивают и вёрстку, и фон разом — цвета лежат в CSS-переменных, и canvas читает их оттуда же.
Что внутри
- Фон реагирует на человека: курсор расталкивает лепестки и раздвигает траву, пыльца собирается вокруг ладони, резкая прокрутка поднимает ветер
- Конструктор букета: цветы добавляются по одному, веер в вазе перестраивается плавно, цена считается на лету, готовый состав переносится в форму заявки
- Восемь сортов цветов нарисованы кодом — ни одной растровой картинки, поэтому смена палитры ничего не стоит
- Кнопка «приглушить движение» рядом с языком: фон замирает на одном кадре, выбор запоминается и включается сам при системной настройке
- Две языковые версии целиком, включая цены отдельными суммами для рублей и долларов