Додайте анімації UI до вашого сайту

Sep 11, 2025

Як

Більшість людей бачать користувальницькі інтерфейси щодня, незалежно від того, чи є це всередині мобільного додатку або на веб-сайті, тому важливо отримати це правильно при створенні їх (a Веб-будівельник зробить це просто для вас), і якщо ви можете їх оживити з деякими Анімація CSS , все краще.

Дослідіть нову прикордонну анімацію CSS

Під час будівництва для Інтернету, особливо, коли мова йде про анімацію, ви повинні розглянути такі речі, як підтримка та продуктивність браузера (пристойна веб хостинг допоможе тут). У цьому підручнику ми збираємося йти через два з найкращих рішень для створення анімацій та переходів.

Ми будемо використовувати комбінацію CSS і Зеленню (GSAP). Ми усвідомлюємо CSS, але деякі з вас не знають про платформу Greensock. Greensock - це система JavaScript, яка дозволяє легко створювати приголомшливі анімації з елементами HTML, використовуючи лише кілька рядків коду.

Зображення та логотипи особливо виділялися набагато більше за останні кілька років. Як часто ми використовуємо emojis, а не текст? Мобільні навігації, здається, використовують значки, а не текст, і з часом користувачі дізнаються, де кожен візьме нас. Ми збираємося почати, створюючи анімовану панель навігації, просто використовуючи логотипи. Коли ви навечемо над кожним, він буде анімувати до кінцевого стану, який буде виглядати схожим на цей скріншот. Отримав багато медіа, щоб додати? Назад у хмара зберігання .

UI animations: icons — У нас є шість навігаційних значків, і один з них показує, що стану курсу буде виглядати, як тільки анімація завершена

Побудувати навігацію

Перш за все, ми створимо новий файл index.html та налаштуйте нашу навігаційну область разом із шістьма посиланнями. Кожне посилання буде складатися з ікони, взятого з іоніків. Нам потрібно призначити клас кожному.

 & lt; div class = "навігаційна бала" & gt;
& lt; a href = "#" class = "navlogo іон-ios-star-outline" & gt; & lt; / a & gt;
& lt; href = "#" class = "navlogo іон-ios-list-outline" & gt; & lt; / a & gt;
& lt; href = "#" class = "navlogo іон-ios-chatboxes-outline" & gt; & lt; / a & gt;
& lt; href = "#" class = "navlogo іон-ios-домашній контур" & gt; & lt; / a & gt;
& lt; href = "#" class = "navlogo іон-ios-pie-outline" & gt; & lt; / a & gt;
& lt; href = "#" class = "navlogo іон-ios-gear-outline" & gt; & lt; / a & gt;
& lt; / div & gt;

Ми не будемо докладно покривати повний HTML або CSS документ, але ви можете Отримайте повний код списку з Github .

Далі нам потрібно буде створити файл CSS, який називається style.css, а потім вставте наступний рядок коду, щоб імпортувати іоніки:

 @import URL (https://code.ionicframework.com/ionicons/2.0.1/cs/ionicons.min.css);

Тепер ми створимо клас навіс Для наших навігаційних зображень всередині таблиці стилів. Тут ми створимо позицію, висоту, розмір шрифту тощо.

 .navlogo {
  Позиція: відносна;
  шрифт: 40px;
  Ширина: 75px;
  маржа: 40px;
  Висота: 75px;
  Лінійна висота: 75px;
  Дисплей: inline-block;
  Колір: #fff;
}

.navlogo: після {
  Позиція: абсолютна;
  Верх: 0;
  Нижня: 0;
  ліворуч: 0;
  Право: 0;
  Кордон: 2PX Solid # E6E6E6;
  зміст: '';
  Z-індекс: -1;
  Прикордонний радіус: 50%;
}

Далі ми повинні встановити анімацію для нашого .navlogo елемент. Тут ми створимо ефекти обертання та перехід, а також змінюючи колір елемента на курсі.

 .navlogo: раніше,
.navlogo: після {
  -Webkit-transition: всі 0,45 послаблення;
  Перехід: Всі 0,45s легкість;
}
.navlogo: hover,
.Navlogo: Активний,
.navlogo.hover {
  Колір: # C0392B;
}
.navlogo: hover: Після,
.Navlogo: Активний: Після,
.navlogo.hover: після {
  Колір кордону: прозорий # C0392B;
  -Мебкіт-перетворення: обертання (360deg);
  Перетворення: обертання (360deg);
}

Нарешті, нам доведеться додати подію, яка видаляє клас курсу, коли миша більше не зависає над нашими логотипами. Це, щоб переконатися, що наш логотип виходить з його анімації. Створіть новий файл JavaScript під назвою main.js, а потім введіть наступний код:

 $ (". Наведіть курсор"). Mouselave (
  функція () {
    $ (це) .removeclass ("hover");
  }
)

Наша навігація тепер готова піти, крім додавання деяких гіперпосилань. Нам вдалося досягти цього просто за допомогою CSS3.

Створення та анімація кнопки на навантаження

UI animations: animated buttons — Кнопки з'являться один за одним з однією секундою затримки між. Greensock дозволяє зробити це з будь-яким елементом HTML

Тепер ми додамо чотири кнопки на нашій сторінці та використовуйте бібліотеку Greensock, щоб повільно принести кожну кнопку, один за іншим за допомогою однієї секунди. Це створить приємний ефект переходу.

По-перше, нам потрібно буде знову відкрити файл index.html та створити нашу кнопку, використовуючи код нижче:

 & lt; div id = "buttonarea" & gt;
& lt; кнопка класу = "anibutton" & gt; змінити фоновий колір & lt; / кнопка & gt;
& lt; кнопка класу = "anibutton" & gt; опція 1 & lt; / кнопка & gt;
& lt; кнопка класу = "anibutton" & gt; варіант 2 & lt; / кнопка & gt;
& lt; кнопка класу = "anibutton" & gt; опція 3 & lt; / кнопка & gt;
& lt; / div & gt;

Потім нам потрібно встановити посилання на бібліотеку Greensock всередині & lt; head & gt; розділ.

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt; & lt; / script & gt;

Нарешті, нам потрібно налаштувати нашу анімацію. Це займе лише одну лінію коду. Похит це функція, яка покладається на час початку нашого елемента. У наших дужках ми вказуємо назву елемента. У цьому випадку це було б .anibutton . Ми також повинні встановити тривалість, і в цьому випадку він встановлюється на одну секунду між кожним анібуттон елемент.

 tweenmax.stagger від ('. Anibutton', 1, {непрозорість: 0}, 1);

Перехід кольору фону та елементів

UI animations: colour transition — Ось як інтерфейс UI буде доглядати за фоном і кнопкою переходу від одного кольору до іншого

Наступна річ, яку ми збираємося подивитися, переходить на фон веб-сайту та кнопки з одного кольору до іншого. Ми не часто зустрічаємо цю функцію на веб-сайтах, хоча це, безумовно, буде цікаво, як такі, як доступність, або для налаштувань веб-додатків, коли користувач може вимагати встановлення власної кольорової схеми.

Переконайтеся, що у вас є фоновий колір та колір кордону та текстовий колір, встановлений для вашої сторінки у файлі style.css.

 .anibutton {
Кордон: 2px твердий # 000;
Колір: # 000;
}

Далі ми створимо функцію JavaScript для налаштування наших різних кольорових переходів Greensock.

 Функція змінаBackground ()
{
   Tweenmax.to ("тіло", 3, {breaftimage: "лінійний-градієнт (ліворуч, # 646580, # 212121)"});
   Tweenmax.to (". Anibutton", 3, {color: "# fff"});
   Tweenmax.to (". Anibutton", 3, {border: "2px solid #fff"});
}

Ми збираємося більше темного режиму тут, тому фон буде темним, але кнопки з'являться світло. Перший рядок коду змінить колір фону до темних варіантів протягом трьох секунд. Друга та третя лінія змінить колір і межу тексту до білого протягом трьох секунд.

Нарешті, нам потрібно буде назвати Зміна обміну () Функція з однієї з наших кнопок, знайдених у файлі index.html.

 & lt; Клас кнопки = "anibutton" onclick = "змінаBackground ()" & gt, зміна фону та lt; / button & gt;

Проект зараз готовий до запуску. Звичайно, ви можете багато чого йти далі, додавши нові елементи та змінюючи стиль кольору для тих, хто теж.

Ця стаття була опублікована у випуску 309 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити випуск 309 тут або Підписатися тут .

Пов'язані статті:

Анімувати та перемикайте назви з CSS
5 порад для Super-Fast CSS
Введення до спеціальних властивостей CSS

Додайте анімації UI до вашого сайту

Побудувати навігацію

Створення та анімація кнопки на навантаження

Перехід кольору фону та елементів

Як - Найпопулярніші статті

Використовуйте Brain.js для побудови нейронної мережі

Як принести 2D-характер до життя в VR

Як малювати барвисте зомбі

Поради щодо дизайну концепції для художників

висвітлюйте свою 3D-роботу з купольними вогнями

Як спроектувати досвід ChatBot

3D-текстовий підручник для графічних дизайнерів

Як отримати свою модель Zbrush у Maya

Категорії