2

Этап анимаций для моего сайта-портфолио. Фея Хаоса уже ликует!

Всем привет! Делюсь прогрессом по созданию своего сайта-портфолио в концепции двух фей. На этой неделе я с головой погрузилась в магию CSS-анимаций. ✨

От сбора референсов до (почти) чистой реализации и вот что удалось сделать:

✅ Проработала 4 основных типа анимаций:

▫️ Эффект «Очищения» (Reveal) — когда контент проявляется как по волшебству.

▫️ Эффект «Появления» (Fade In) — плавное возникновение элементов.

▫️ Эффект «Пульсации» (Pulse) — лёгкое свечение и дыхание объектов.

▫️ Эффект «Наведения» (Hover) — элементы реагируют на курсор.

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

Работа продолжается! В планах на следующий этап - отрисовка и анимация самой феи. Фея Порядка довольна, Фея Хаоса уже придумывает, как всё сломать 😂

Коллеги-разработчики и дизайнеры, как вам такой прогресс? Сталкивались с сложными анимациями?

Этап анимаций для моего сайта-портфолио. Фея Хаоса уже ликует! Искусство, Персонажи, Творчество, Киберпанк, Разработка, Дизайн, Анимация, CSS, Frontend, Портфолио, Сайт, Фэнтези, Digital, Длиннопост

Фото экрана с примером анимаций

Этап анимаций для моего сайта-портфолио. Фея Хаоса уже ликует! Искусство, Персонажи, Творчество, Киберпанк, Разработка, Дизайн, Анимация, CSS, Frontend, Портфолио, Сайт, Фэнтези, Digital, Длиннопост

Небольшая часть кода на js внутри html документа