Зміст
Більшість людей бачать користувальницькі інтерфейси щодня, незалежно від того, знаходиться це в мобільному додатку чи на веб-сайті, тому важливо правильно це зробити, створюючи їх (конструктор веб-сайтів зробить це простим для вас), і якщо ви зможете оживити їх за допомогою анімації CSS , тим краще.
- Дослідіть нові межі анімації CSS
Розробляючи для Інтернету, особливо що стосується анімації, ви повинні враховувати такі речі, як підтримка браузера та продуктивність (тут допоможе гідний веб-хостинг). У цьому посібнику ми проведемо два найкращих рішення для створення анімації та переходів інтерфейсу користувача.
Ми будемо використовувати комбінацію CSS та GreenSock (GSAP). Ми всі знаємо про CSS, але деякі з вас можуть не знати про платформу GreenSock. GreenSock - це фреймворк JavaScript, який дозволяє легко створювати приголомшливі анімації з елементами HTML, використовуючи лише кілька рядків коду.
За останні кілька років зображення та логотипи особливо помітно виділялися. Як часто ми використовуємо смайли, а не текст? Здається, мобільні навігаційні системи використовують піктограми, а не текст, і з часом користувачі знають, куди нас заведе кожен. Ми почнемо зі створення анімованої панелі навігації, лише використовуючи логотипи. Коли ви наведете курсор на кожен із них, він буде анімований до остаточного стану, який буде виглядати приблизно так, як на цьому скріншоті. Маєте додати багато засобів масової інформації? Створіть резервну копію в хмарному сховищі.
Побудуйте навігацію
Перш за все, ми створимо новий файл index.html та налаштуємо нашу область навігації разом із шістьма посиланнями. Кожне посилання буде складатися з піктограми, взятої з Іоніконів. Нам потрібно буде призначити клас кожному.
div class = “navigationbar"> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> / div>
Ми не будемо детально висвітлювати повний документ HTML або CSS, але ви можете отримати повний перелік кодів із GitHub.
Далі нам потрібно буде створити файл CSS, який називається style.css, а потім вставити такий рядок коду для імпорту Ionicons:
URL-адреса імпорту (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
Зараз ми створимо клас navlogo для наших навігаційних зображень у таблиці стилів. Тут ми встановимо положення, висоту, розмір шрифту тощо.
.navlogo {позиція: відносна; розмір шрифту: 40 пікселів; ширина: 75 пікселів; поле: 40 пікселів; висота: 75px; висота рядка: 75 пікселів; дисплей: вбудований блок; колір: #fff; } .navlogo: після {позиція: абсолютна; зверху: 0; знизу: 0; ліворуч: 0; праворуч: 0; межа: 2px суцільний # e6e6e6; зміст: ’’; z-індекс: -1; межа-радіус: 50%; }
Далі нам потрібно налаштувати анімацію для нашого .navlogo елемент. Тут ми створимо ефекти обертання та переходу, а також зміну кольору елемента при наведенні.
.navlogo: до, .navlogo: після {-webkit-переходу: всі 0,45-ти спрощення; перехід: всі 0,45 с легкість у виїзді; } .navlogo: hover, .navlogo: активний, .navlogo.hover {color: # c0392b; } .navlogo: hover: після, .navlogo: активний: після, .navlogo.hover: після {border-color: transparent # c0392b; -webkit-перетворення: обертати (360deg); перетворення: обертати (360deg); }
Нарешті, нам потрібно буде додати подію, яка видаляє клас наведення, коли миша більше не наводить курсор на наші логотипи. Це робиться для того, щоб наш логотип вийшов із своєї анімації. Створіть новий файл JavaScript із назвою main.js, а потім введіть наступний код:
$ (“. Hover"). Mouseleave (function () {$ (this) .removeClass („hover");});
Наша навігація готова до роботи, окрім додавання гіперпосилань. Нам вдалося досягти цього лише за допомогою CSS3.
Створюйте та анімуйте кнопки під час завантаження
Тепер ми додамо на нашу сторінку чотири кнопки і використовуємо бібліотеку GreenSock, щоб повільно вводити кожну кнопку, одну за одною із затримкою в одну секунду. Це створить приємний ефект переходу.
По-перше, нам потрібно буде знову відкрити файл index.html і створити наш розділ кнопки, використовуючи код нижче:
div id = “buttonarea"> button> Change Color Background / button> button> Option 1 / button> button> Option 2 / button> button> Option 3 / button> / div>
Потім нам потрібно встановити посилання на бібліотеку GreenSock усередині розділу head>.
script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"> / script>
Нарешті, нам потрібно налаштувати нашу анімацію. Це займе лише один рядок коду. Похитування - це функція, яка зрушить час початку нашого елемента. У наших дужках ми вказуємо назву елемента. У цьому випадку це було б так .anibutton. Нам також потрібно встановити тривалість, і в цьому випадку вона встановлюється на одну секунду між кожною анібутон елемент.
TweenMax.staggerFrom ('. Anibutton', 1, {непрозорість: 0}, 1);
Перехід кольору тла та елемента
Наступне, що ми розглянемо, це перехід фону та кнопок веб-сайту з одного кольору на інший. Ми не часто стикаємося з цією функцією на веб-сайтах, хоча вона, безумовно, була б цікавою для таких речей, як доступність або налаштування веб-додатків, коли користувач може захотіти встановити власну колірну схему.
Переконайтеся, що для вашої сторінки у файлі style.css налаштовано колір тла та колір меж та тексту.
.anibutton {межа: 2px суцільний # 000; колір: # 000; }
Далі ми створимо функцію JavaScript для налаштування різних кольорових переходів GreenSock.
function changeBackground () {TweenMax.to («тіло», 3, {backgroundImage: "лінійний градієнт (ліворуч, # 646580, # 212121)"}); "#fff"}); TweenMax.to (“. Anibutton", 3, {border: "2px solid #fff"});}
Тут ми хочемо переглянути більш темний режим, тому фон буде темним, але кнопки будуть здаватися світлими. Перший рядок коду змінить колір фону на більш темний колір протягом трьох секунд. Другий та третій рядки змінять колір та межу тексту на білий протягом трьох секунд.
Нарешті, нам потрібно буде зателефонувати до changeBackground () функції однієї з наших кнопок, знайдених у файлі index.html.
button onclick = "changeBackground ()"> Змінити фон / кнопку>
Зараз проект готовий до запуску. Звичайно, ви можете піти набагато далі, додавши нові елементи та змінивши стиль кольорів для них.
Ця стаття була опублікована в номері 309 від чистий, самий продаваний у світі журнал для веб-дизайнерів та розробників. Придбайте випуск 309 тут або підпишіться тут.
