Original size 1118x1578

Веб-плакат «Волшебный сад»

Я создала волшебный сад, где через CSS-анимации передала эстетику ботанических справочников. Здесь можно ловить насекомых, наблюдать за мерцанием звёзд, и изучать магические растения.

big
Original size 2048x2007

Садовый интерактив

Каждый элемент сада — часть волшебной экосистемы. На ночном небе садового полотна тихо мигают звёзды.

Бабочки, стрекозы и жуки кружат над цветами, реагируя на движение курсора. Стоит лишь поднести указатель — и насекомое замирает в воздухе, позволяя «поймать» себя.

big
Original size 2940x658

Каждый цветок хранит своё имя и магический смысл. Когда наводишь курсор, появляется название — как пометка в старинном гербарии.

Original size 2940x1446

Иногда жизнь сада замирает, но стоит присмотреться — среди листвы мелькнёт зелёная спинка. Жаба и кузнечик появляются и исчезают, как стражи волшебного сада.

Original size 2940x1894

Цветы и грибы оживают благодаря покадровой анимации: лепестки мягко меняют форму, создавая эффект движения и глубины.

Original size 2940x1894

Как в старинных алхимических манускриптах, в верхней части страницы тянется надпись — магическая формула, объединяющая весь сад.

Original size 2940x158

Элементы стиля

Использовала болотно-мистическую цветовую палитру — оттенки зелени, тины и лунного света, которые передают атмосферу влажного сада ранним утром.

Original size 2865x544

Подчеркнула эстетику старинных надписей с помощью лёгкого трекинга.

Original size 2270x486

Передала ощущение живого мира, где флора и фауна переплетаются — растения, грибы, насекомые и тихие обитатели трав существуют в едином ритме.

Original size 4012x771

Адаптивы

Плакат сверстан под 7 популярных размеров экранов — от мобильных до десктопных.

На мобилках и планшетах интерактив переработан: скрытые элементы заменены на «всегда активные», чтобы компенсировать отсутствие ховера.

Original size 3211x1331
Original size 2048x1181

Ссылки

Веб-плакат «Волшебный сад»
We use cookies to improve the operation of the website and to enhance its usability. More detailed information on the use of cookies can be fo...
Show more