Створити анімації Slick UI

Все частіше, дизайнери та розробники визнають важливість дизайну руху в контексті досвід користувача . Анімація в Інтернеті більше не є способом захоплення та Wow користувачеві, але функціональний інструмент, який робить досвід легким, веселим та незабутнім. І існує ряд різних інструментів та підходів, з Анімація CSS до методів використання Bootstrap або HTML.

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

• 15 чутливих підручників веб-дизайну

Отже, в цьому підручнику ми створимо те, що не плутає, слідує за загальними моделями і стильно. Це буде розділ профілю команди, який ви часто бачите на веб-сайтах компанії. Ідея полягає в тому, щоб показати трохи більше інформації про команду / співробітника, коли кожен зависає. Протягом усього підручника ми будемо використовувати Codepen, але, звичайно, ви можете використовувати свій власний улюблений редактор та середовище розробки. Пам'ятайте, що створення більш складного сайту може змінити вашу веб хостинг Потрібно, будьте впевнені, що у вас є сервіс, який працює для вас.

Чи хотіли б ви простий інструмент для створення сайту? Використовуйте блискучий Веб-будівельник .

01. Отримати налаштування

Починати з відкриття коду та створення нової ручки. Ми будемо використовувати Bootstrap 4 і SASS (.SCSS), тому переконайтеся, що в межах налаштувань ви включите завантаження CSS та JS, як посилання ресурсу, а також встановіть CSS до SCSS. Інший пов'язок ресурсів, який вам потрібно буде додати, - це шрифт Awesome, який ми будемо використовувати для наших соціальних значків.

02. Створіть контейнери, рядки та стовпці

Контейнери - це те, що завантажувальне використання використовує як основний елемент макета, і вони потрібні, коли ви використовуєте систему Grid Grid. В межах контейнерів потрібно додати поспіль. Рядки - це обгортки для стовпців, і ви можете вказати кількість стовпців, які ви хочете з можливих 12, і яка точка точка буде. У нашому випадку ми хочемо, щоб елемент, який має зіткнутку середнього розміру та заповнює ширину трьох стовпців.

 & lt; div class = "контейнер" & gt;
 & lt; div class = "row" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Додати посилання на зображення та колір тут
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Встановити зображення профілю та колір

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

 & lt; div class = "team blue" & gt;
    & lt; div class = "Фото" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Додайте назву та назву профілю

Останній біт HTML, який буде доданий, буде для назви, назви та соціальних значків, які будуть додані під останню DIV-тег, який ми просто додали на останньому кроці. Для соціальних значків ми будемо використовувати шрифт Awesome, і вони будуть розміщені в незареєстрованому списку.

 & lt; div class = "Профіль-txt" & gt;
      & lt; h1 class = "назва" & gt; libby & lt; / h1 & gt;
      & lt; span class = "положення" & gt; веб-дизайнер & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "соціальні іконки" & gt;
       & lt; li & gt; & lt; href = "" клас = "fa facebook" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; href = "" клас = "fa fa-twitter" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; href = "" клас = "fa fa-linkedin" & gt; & lt; / a & gt; & lt; / li & gt;
       & lt; li & gt; & lt; href = "" клас = "fa fa-dribbble" & gt; & lt; / a & gt; & lt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Набір змінних SASS

Якщо ви стежите за допомогою Codepen, то ви вже будете встановлювати SASS, і готові піти. Вам просто потрібно натиснути піктограму / кнопку / кнопку пера та вибрати SCSS як препроцесор CSS. Тоді ми можемо йти вперед і додати в деяких змінних, які зберігатимуть всі наші кольори. Ми використовували RGBA як значення кольорів, щоб дозволити нам більш значущий контроль над усіма непрозорості кольорів.

 $ BlueGradient: RGBA (103, 188, 223, .8);
$ LightGreen: RGBA (188, 219, 183 ,.5);
$ Green: RGBA (119, 180, 109, 0,5);
$ Green-Border: RGBA (171, 221, 164, 0,5);
$ Blue: RGBA (80, 205, 227, 1);
$ Blue-Border: RGBA (147, 223, 236, 1); 

06. Завантажте фонове зображення

Щоб зробити речі більш привабливими, ми розмістимо гарне фонове зображення на тілі. Тут ми можемо використовувати наш перший набір змінних і дати фонове зображення приємним градієнтним накладанням, що йде від світло-зеленого до синього кольору. Потім, щоб зробити наш фонове зображення повністю чутливим, ми встановимо висоту зору до 100VH.

 Тіло {
 Фон: лінійний градієнт (направо, $ Lightgreen, $ bluegradient), URL-адреса ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Центр без повторюваного;
 Розмір фон: обкладинка;
 Позиція: відносна;
 Висота: 100вх;
 } 

07. Виберіть фон та зображення профілю

Кожен профіль команди буде надано однакові стилі, а команда класу буде використана для цього. Фон буде білим, всі центром вмісту, і нам потрібно переконатися, що позиція встановлена ​​на відносну. Потім ми можемо включити CSS для зображення профілю. Для найкращих результатів переконайтеся, що оригінальне зображення, яке ви використовуєте, є розміри не більше, ніж 200px квадрат. Однак ми змінимо висоту і ширину цих у рамках правила фото CSS.

 .TEAM {
 Прокладка: 30px 0 40px;
 маржа-вершина: 60px;
 фон: #fff;
 Текст-вирівнювання: Центр;
 переповнення: приховані;
 Позиція: відносна;
 курсор: покажчик;
 Коробка-тінь: 0 0 25PX 1PX RGBA (0,0,0,0,3);
 .photo {
 Дисплей: inline-block;
 Ширина: 130px;
 Висота: 130px;
 маржа-дна: 50px;
 Позиція: відносна;
 Z-індекс: 1;
 }
 } 

08. Додайте анімацію

Перша частина анімації, яку ми додаємо, буде у верхній частині нашого елемента профілю. Ідея полягає в тому, що коли ми наводять над усім елементом, синя кругова форма буде анімація. Ми можемо контролювати, скільки синього ми можемо бачити, вказавши позицію цього, щоб мати нижній відсоток. Тому грайте з цим відсотком, і ви отримаєте кращу ідею про те, як це працює. Ви ніколи не знаєте: ви навіть можете виявити кращий ефект!

 .blue .photo: до {
 зміст: "";
 Ширина: 100%;
 Висота: 0px;
 Прикордонний радіус: 50%;
 фон: $ синій;
 Позиція: абсолютна;
 Нижня: 130%;
 Право: 0;
 ліворуч: 0;
 Перетворення: шкала (3);
 Перехід: Всі .3S лінійний 0S;
}
.team: hover .photo: до {
 Висота: 100%;
} 

09. Анімація фото команди

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

 .blue .pic: після {
 зміст: "";
 Ширина: 100%;
 Висота: 100%;
 Прикордонний радіус: 50%;
 фон: $ синій;
 Позиція: абсолютна;
 Верх: 0;
 ліворуч: 0;
 Z-індекс: 1;
}
.photo img {
 Ширина: 100%;
 Висота: Авто;
 Прикордонний радіус: 50%;
 Трансформація: шкала (1);
 Перехід: всі 0,9) легкість 0S;
}
.blue: hover .photo img {
 коробка-тінь: 0 0 0 14px $ blue-border;
 Трансформація: шкала (0,6);
 }

10. Напишіть ім'я та положення профілю

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

 .Profile-txt {
 маржа-дна: 30px;
 .title {
 Шрифт-розмір: 2Rem;
 маса шрифту: 700;
 Колір: # 333;
 letter-spacing: 1.5px;
 Текст-перетворення: капіталізація;
 маржа-дна: 6px;
 }
 .position {
 Дисплей: блок;
 Шрифт-розмір: 1Rem;
 Колір: # 555;
 }
} 

11. Додайте соціальні іконки

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

 .blue. Соціальні іконки {
 Ширина: 100%;
 Стиль списку: немає;
 підкладка: 0;
 маржа: 0;
 фон: $ синій;
 Позиція: абсолютна;
 Нижня: -100px;
 ліворуч: 0;
 Перехід: всі 0,6) легкість;
 li {
 Дисплей: inline-block;
 
 a {
 Дисплей: блок;
 Підкладка: 8px;
 Шрифт-розмір: 1Rem;
 Колір: #fff;
 Текст-прикраса: Ні;
 Перехід: все 0,5s легкість;
 & amp;: hover {
 Колір: $ синій;
 фон: #fff;
 }
 }
 }
}
.team: hover. Соціально-іконки {
 Нижня: 0px;
} 

12. Зробіть член Зеленого команди

Щоб трохи змішувати речі, ми можемо почати додавати більше членів до нашої команди. Колір ми будемо використовувати для цього наступного, буде зелений. Але спочатку поверніться до HTML-розділу / файлу, і все, що нам потрібно зробити, це скопіювати клас Col-MD-3 - не рядок - до останнього DIV-мітки під соціальними значками та вставте її.

 & lt; div class = "team green" & gt;
 & lt; div class = "Фото" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Після того, як ви змінили синій клас до зеленого, ми можемо остаточно додати у всіх CSS, який дасть нам таку ж анімацію.

 .green: hover .photo img {
 Коробка-тінь: 0 0 0 14px $ Green-Border;
 Трансформація: шкала (0,6);
 }
.green .photo: до {
 зміст: "";
 Ширина: 100%;
 Висота: 0px;
 Прикордонний радіус: 50%;
 фон: $ зелений;
 Позиція: абсолютна;
 знизу: 135%;
 Право: 0;
 ліворуч: 0;
 Перетворення: шкала (3);
 Перехід: Всі .3S лінійний 0S;
}
.green. Соціально-іконки {
 Ширина: 100%;
 Стиль списку: немає;
 підкладка: 0;
 маржа: 0;
 фон: $ зелений;
 Позиція: абсолютна;
 Нижня: -100px;
 ліворуч: 0;
 Перехід: всі 0,6) легкість;
 li {
 Дисплей: inline-block;
 a {
 Дисплей: блок;
 Підкладка: 8px;
 Шрифт-розмір: 1Rem;
 Колір: #fff;
 Текст-прикраса: Ні;
 Перехід: все 0,5s легкість;
 & amp;: hover {
 Колір: $ зелений;
 фон: #fff;
 }
 }
 }
} 

І краса цього підходу полягає в тому, що ви можете повторити, як потрібно для багатьох різних кольорових класів, що дозволяє вам тонкої теми, як це потрібно.

Якщо ви будуєте сайт з командою, переконайтеся, що ви отримуєте надійний, безпечний хмара зберігання тримати речі зчеплення.

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

Хочете дізнатись більше про INS і виходи анімації інтерфейсу?

Якщо ви зацікавлені в тому, щоб дізнатися більше про те, як ви можете зробити свої сайти поп і близнюк, використовуючи анімацію UI, переконайтеся, що ви вибрали свій квиток Генерувати Лондон .

Фронтальний дизайнер та розробник зараз працюють як творчий розробник для Asemblr.com, Steven Roberts буде доставляти свою розмову - CSS-анімацію: за переходами - в якому він покаже вам найкращі інструменти для роботи та відтворити деякі з кращих анімацій Веб повинен запропонувати, відкриваючи можливості та обмеження анімації з просто CSS.

Генерувати Лондон відбудеться з 19-21 вересня 2018 року. Отримайте квиток зараз .

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

• Як використовувати анімацію в мобільних додатках
• Посібник із дизайну UI
• Посібник для розробки інтерфейсу