Включіть меню за допомогою анімації з CSS

Sep 12, 2025

Як

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

Проте в Інтернеті ми звикли до речей, що з'являються і зникають у мить ока. Ми натискаємо на посилання та все змінюється. Це як очолює в кімнату з зав'язаними очима, обертаючись навколо декількох разів, і видаляючи зав'язуючи, щоб взяти навколишнє середовище. Ви навіть не знаєте, які двері ви ввели. Це на великі, як побудовані більшість сайтів. Ми можемо зробити краще.

При вивченні потенціалу Анімація CSS , Можна легко дозволити нашим уявам перейти на гіпердріве і посипати анімацію просто про все. Хоча анімація може бути великою, ми повинні бути обережними і завжди запитувати себе: це анімація значуща? Чи додає він будь-яку цінність, крім того, щоб бути красивою? Чи є це полегшення нашого продукту?

Значуща анімація

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Це відправна точка для підручника - зразка меню, яке ми розкриємо з анімацією

У цій статті ми йдемо з загальним Дизайн інтерфейсу Елемент: перемикач меню. Ми збираємося створити меню (і піктограму, щоб піти з ним) з CSS, і зробити його живим з анімаціями. Ми переконаємося, що анімації є значущими, але також застосовуйте найкращі практики веб-виконавців, щоб забезпечити, щоб вони були настільки рівними.

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

Замість того, щоб просто спалахнути до близького значка, ми збираємося анімувати та морф трьома вертикальними лініями (що складають значок меню) у "X", щоб представити близьку піктограму. Іншими словами, як меню виявляється піктограма морфів у закриту кнопку.

Пов'язані елементи

Ви можете думати, чи це значна анімація? Ну, велике питання. Коротка відповідь: Так! Ще довша відповідь: Анімації чудово підходять під час сполучних елементів на екрані, і показуючи, як вони стосуються один одного.

Оскільки ми масштабуємо фон меню, щоб стати меню, ми показуємо, як два пов'язані - подібні до того, як значок програми, при натисканні на iOS або Android, збільшується до екрана, показуючи, що додаток було запущено з що дуже значок. Наш значок меню не просто перемикайте меню: це меню, тільки згорнуто.

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

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

Подивіться, як це зробити у відео-підручнику вище та написані нижче дії.

01. Початок роботи

By drawing the menu icon with CSS (and no images), we can easily animate it later — Намалюючи значок меню за допомогою CSS (і без зображень), ми можемо легко анімувати його пізніше

Завантажте файли проекту . Відчини index.html У браузері, і ви повинні побачити три великі посилання на білому фоні. Це меню, накладаємося, ми покажемо.

Перш за все, нам потрібно приховати це. В styles.css , додати ці стилі .Menu-накладання :

 непрозорість: 0;
Видимість: прихована;

З накладанням, кнопка повинна з'явитися у верхньому лівому куті. Давайте намалюємо значок меню тут, тому щось натиснути, щоб показати накладання. Щоб полегшити анімацію, ми залучимо його, використовуючи просто HTML та CSS; Немає растрових або векторів. Ми вже отримали деякий HTML index.html Для меню: контейнер ( .Menu ), фон ( .Menu-кола ), посилання ( .Menu-link ) і значок ( .Menu-icon ) з одним проміжком для кожного рядка.

Окремий ділити На задньому плані є дещо нетрадиційний підхід. Якщо ми не збиралися додати анімацію до цього кола, нам не потрібна окрема ділити ; ми могли просто додати a прикордонний радіус і фоновий колір до нашого меню-посилання .

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

Почнемо малювати рядки, які складають значок. Що вони мають спільного? Вони однаково широкі, вони мають округлі кути, абсолютно розташовані, і вони мають фоновий колір. Оскільки всі лінії поділяють лінія меню Клас, давайте використовувати його, щоб встановити ці спільні властивості:

 .menu-line {
 Колір фону: # 333;
 Висота: 2px;
 Ширина: 100%;
 Прикордонний радіус: 2px;
 Позиція: абсолютна;
 ліворуч: 0;
}

Тоді ми можемо використовувати унікальні класи рядків, щоб встановити вертикальне положення:

 .menu-line-1 {TOP: 0; }

.menu-line-2 {
 Верх: 0;
 Нижня: 0;
 Маржа: Авто;
}

.menu-line-3 {дно: 0; }

02. Додайте ефект хов

To make the menu appear clickable, we inflate the background plate on hover — Щоб зробити меню, мислим, ми роздуваємо фонову табличку на курсі

Давайте зробимо значок чітко натисним, додавши ефект Hover. В styles.css , створіть новий селектор для кола меню Щоб масштабувати його, коли ви керуєте меню:

 .menu: hover .menu-кола {transform: шкала (1.4); }

Тепер ми можемо додати нашу першу анімацію. Додавати "Перехід: все 0,2с легкість" до .Menu-кола {} (не до держави на курсі). Ми розповідаємо браузер, щоб анімувати всі властивості, які можуть змінюватися .Menu-кола . Отже, коли ми масштабуємо його на курсі, це анімація протягом 0,2 секунди до нової держави, з функцією часу легкість .

Як ви знаєте, яка функція часу вибору? Перш за все, уникайте використання лінійної функції часу. Кілька речей у реальному світі рухаються на абсолютно постійній швидкості, тому об'єкти, анімовані з лінійною функцією часу, як правило, виглядають неприродними та жорсткими (як сказав Ейнштейн, "Бог не грає кістки з лінійною функцією часу").

Як правило, полегшення чудово працює для подання нових об'єктів, і легкість Відмінно працює для видалення об'єктів. І коли ви сумніваєтеся, легкість Це тверда функція часу для за умовчанням: вона має повільний початок і повільний кінець, створюючи гладку та рідину анімацію.

03. Показати та приховати меню

Давайте скористаємося jQuery, щоб показати і приховати нашу новостворену накладання. В script.js , перемикання класу відчинено на .Menu-накладання Всередині існуючого обробника кліків:


    $ (". MENU-Overlay"). Togglass ("Open");

Потім покажіть накладення, коли він має клас відкритого:

 .Menu-Overlay.Open {
 непрозорість: 1;
 видимість: видимий;
}

04. Підключіть значок меню

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

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

Ми повинні бути в змозі стилювати коло меню, коли меню натиснуто. Відчини script.js , і всередині нашого існуючого клацання функція перемикайте клас відкритий для нашого .Menu :


  $ (". Меню"). Togglass ("Open");

Тепер ми можемо націлити цей клас за допомогою CSS та розширити коло, оскільки меню відкривається. На самому дні style.css Розширити .Menu-кола коли .Menu також має клас .відчинено :

 .menu.open .menu-кола {transform: шкала (60);
}

05. Перетворення значка

The white circle expands to become the menu background, and the icon morphs into an 'X' — Біле коло розширюється, щоб стати меню, а значок морфи в "X"

У нас є прекрасний ефект показати для нашого меню, але як ми повертаємо значок меню в близьку піктограму? Надзвичайно легко, коли ви знаєте, як - нам потрібно лише встановити три властивості CSS. По-перше, нам потрібно приховати середню лінію під час показу меню:

 .menu.open .menu-line-2 {непрозорість: 0; }

Тоді все, що нам потрібно зробити, це перевертати інші два рядки 45 градусів у протилежних напрямках (лінії повинні вказувати в різних напрямках, щоб утворити "X", тому відзначайте, як одна з ліній має негативне обертання 45 градусів):

 .menu.open .menu-line-1 {
 Трансформування: обертання (-45deg);
}

.menu.open .menu-line-3 {
 Трансформування: обертання (45deg);
}

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

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

 .menu.open .menu-line-1 {
 Трансформація: перев'язка (7px) перев'язка (-50%) обертання (-45deg);
}

.menu.open .menu-line-3 {
 Трансформація: перев'язка (-7px) переставляти (50%) обертання (45deg);
}

Ці перетворювачі будуть переміщати дві лінії, щоб вони були вертикально центровані в контейнері іконки, а потім повернути їх, щоб утворити хрест.

Давайте зламаємо його. Ми маємо дві переклади одночасно: Перекладний (7px) і Перекладний (-50%) . Перше перетворення, Перекладний (7px) , використовується для переміщення верхнього краю лінії до вертикального центру полотна. Математика тут проста: 14 - це висота нашої ікони, розділяючи його двома, ми отримуємо середній пункт: 7.

Другий перетворення, Перекладний (-50%) , використовується для переміщення лінії так, щоб вертикальний центр лінії, а не його верхній край, проживає на вертикальній центральній точці полотна.

Зазвичай при використанні Відстоювати Вхід CSS ви посилаєтеся на батьків елемента (налаштування Ширина: 100% відповідає ширині елемента до свого батька), але якщо ви використовуєте відсотки з властивостями перетворення, ви звертаєтесь до самого елемента, а не батьком. Тому для нас, щоб знайти висоту лінії і перемістіть його вгору на половину цього, все, що нам потрібно Перекладний (-50%) .

06. Морф між іконками

Замість того, щоб просто замінити значок меню за допомогою близького значка, давайте морфом між двома державами.

Почніть, додавши перехід до .menu-line в style.css :

 Перехід: всім 0,25s легкість;

Та-да! Значок меню морфінгу. Анімація трохи нудна, хоча. Давайте це виправити. Щоб зробити рядки більш яскравими, ми можемо повернути їх як додаткові 90 градусів. Піктограма буде виглядати однаково, але лінії будуть подорожувати далі протягом того ж періоду часу. Змінити обертання Поворот (-135DEG) і Поворот (135deg) .

Як правило, ви завжди можете покращити анімацію, використовуючи Custom Bézier Curve, яка краще адаптується до вашої анімації. В даний час ми використовуємо легкість - Це означає, що анімація матиме повільний початок і закінчення, з швидшим темпом посередині.

Я думаю, що більш пружинний ефект підходить для нашої ікони. Давайте зробимо його швидким, з невеликим ефектом віднинок, як це закінчується. За .Menu-line , замінити " легкість » За допомогою Custom Bézier Curve:

 Перехід: всі 0,25-кубічно-беззерка (0,175, 0,885, 0,32, 1,275);

Які ці цифри? Не хвилюйтеся: криві Бецєр рідко написані вручну. Ти використовуєш Кубічний-безір () Щоб визначити темп анімації з часом, а не написав їх самостійно, я рекомендую використовувати довідковий сайт. Це походить від полегшення. Він перевищує в кінці анімації, і створює тонкий ефект відскакує.

Поки ми на ньому, йдіть agnings.net і захопити код aseautexpo . Ми будемо використовувати це, щоб створити більш вишуканий ефект для фонової анімації меню. Оновлення переходу .Menu-кола Щоб скористатися цією користувальницькою кривою Bézier, і зробити анімацію трохи довше (0,5с):

 Перехід: всі 0,5-х кубічно-беззерка (0,19, 1, 0,22, 1);

Вітаємо, ви створили набір анімацій, які мають сенс: вони допомагають зрозуміти, що відбувається на сайті під час навігації, створюючи почуття просторової обізнаності. Крім того, анімація бігають гладко.

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

Ця стаття спочатку з'явилася чистий журнал Випуск 281. Підписатися на мережу тут .

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

10 вражаючих прикладів анімації CSS3
28 видатних прикладів CSS
Початок роботи з веб-доступними

Включіть меню за допомогою анімації з CSS

Значуща анімація

Пов'язані елементи

01. Початок роботи

02. Додайте ефект хов

03. Показати та приховати меню

04. Підключіть значок меню

05. Перетворення значка

06. Морф між іконками

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

5 гарячих нових функцій CSS і як їх використовувати

Як створити автентичну мангу комічну смужку

10 порад для моделювання твердого поверхні

Як розвивати міфічні істоти

Як передати звук у живопису

Найпопулярніші поради щодо уточнення ваших рукописних ілюстративних методів

Моделювання складної геометрії: 5 кращих порад

Як спроектувати промо для уявного бренду

Категорії