Porniți meniurile dvs. folosind animație cu CSS

Sep 14, 2025

să

Este prin animație că avem sens al lumii: ușile se deschid, mașinile conduc la destinațiile lor, buzele curl în zâmbete. Chiar și lucrurile care se simt instantanee, cum ar fi fulgerul izbitoare sau căzând un telefon pe față în timp ce îl folosesc în pat, se întâmplă în timp. Este prin această mișcare pe care o înțelegem cum se referă obiectele și funcționează; Dacă acestea sunt ușoare sau grele, rigide sau pierdute, conectate sau separate, lipicioase sau alunecoase.

Pe Web, totuși, ne-am obișnuit cu lucrurile care apar și dispărând în clipi de ochi. Faceți clic pe un link și totul se schimbă. Este ca și cum ai fi condus într-o cameră cu ochelari, rotirea în jur de câteva ori și îndepărtarea ochelarului pentru a lua în împrejurimi. Nici măcar nu știți ce ușă ați intrat. Acest lucru este și mare modul în care majoritatea site-urilor sunt construite. Putem face mai bine.

Când învățați despre potențialul CSS animație , Poate fi ușor să lăsați imaginația noastră să intre în hiperdrive și să presărați animații despre tot despre tot. În timp ce animația poate fi grozavă, trebuie să fim atenți și să ne întrebăm întotdeauna: este această animație semnificativă? Adăugați orice altă valoare decât a fi frumoasă? Ea face ca produsul nostru să fie mai ușor de utilizat?

Animație semnificativă

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Acesta este punctul de plecare pentru tutorial - meniul de eșantion pe care îl vom dezvălui cu o animație

În acest articol vom lucra cu o comună UI Design. Element: O comutare de meniu. Vom crea meniul (și o pictogramă pentru a merge cu ea) cu CSS și a face ca acesta să vină cu animații. Ne vom asigura că animațiile sunt semnificative, dar, de asemenea, aplicați cele mai bune practici de performanță web pentru a vă asigura că sunt cât mai netede posibil.

Poti Previzualizați rezultatul final aici . Când utilizatorul dă clic pe pictograma meniului, vom extinde placa de fundal a pictogramei (un cerc) pentru a acoperi ecranul și prezentați suprapunerea meniului.

Mai degrabă decât doar bliț la o pictogramă apropiată, vom anima și vom transforma cele trei linii verticale (care alcătuiesc pictograma meniului) într-un "x", pentru a reprezenta o pictogramă apropiată. Cu alte cuvinte, deoarece meniul este dezvăluit pictograma morphs într-un buton apropiat.

Elemente similare

S-ar putea să te gândești "așa, este o animație semnificativă? Ei bine, o întrebare minunată. Răspuns scurt: Da! Răspuns mai lung: Animațiile sunt excelente la conectarea elementelor de pe ecran și arătând modul în care se referă reciproc.

Pe măsură ce sculim placa de fundal a meniului pentru a deveni meniul, arătăm modul în care cele două sunt conectate - similare cu modul în care o pictogramă de aplicație, când este apăsată pe iOS sau Android, scală și preia ecranul, arătând că aplicația a fost lansată de la acea icoană. Pictograma meniu nu pornește doar meniul: este meniul, doar prăbușit.

În mod similar, la fel cum un comutator on / off se transformă între starea sa și off când o apăsați pe iOS, comutarea meniului nostru se va schimba între o pictogramă de meniu și o pictogramă apropiată în funcție de modul în care meniul site-ului nostru este vizibil sau ascuns. Acest lucru ajută la aplicarea ideii că cele două icoane funcționează în moduri similare: ambele controlează meniul.

Deci, în timp ce facem distractiv site-ul nostru de a folosi, facem, de asemenea, mai ușor de înțeles și îmbunătățind experiența utilizatorului atât de ușor.

Vedeți cum să faceți acest lucru în Tutorialul Video de mai sus și în pașii scrise de mai jos.

01. Începeți

By drawing the menu icon with CSS (and no images), we can easily animate it later — Prin desenarea pictogramei de meniu cu CSS (și fără imagini), putem anima cu ușurință mai târziu

Descărcați fișierele proiectului . Deschide index.html. Într-un browser și ar trebui să vedeți trei linkuri mari împotriva unui fundal alb. Aceasta este suprapunerea meniului pe care o vom dezvălui.

Mai întâi de toate, trebuie să o ascundem. În stiluri.Css. , adăugați aceste stiluri la .Menu-suprapunere :

 Opacitate: 0;
Vizibilitate: ascunsă;

Cu suprapunerea a dispărut, ar trebui să apară un buton în colțul din stânga sus. Să atragăm pictograma meniu aici, deci există ceva pentru a face clic pe pentru a arăta suprapunerea. Pentru a face ușor animați, o vom atrage folosind doar HTML și CSS; Nu există bitmap-uri sau vectori. Avem deja niște HTML în index.html. Pentru meniu: un container ( .meniul ), un fundal ( .Menu-cerc. ), o legătură ( .Menu-link. ) și pictograma ( .Menu-icon. ) cu o singură perioadă pentru fiecare linie.

Având un separat div Pentru ca fundalul este o abordare oarecum neconvențională. Dacă nu eram pe cale să adăugăm animații în acest cerc, nu am avea nevoie de un separat div ; am putea adăuga doar a Raza de frontieră și culoarea de fundal la noi Meniu-link. .

Cu toate acestea, vrem să fim liberi să folosim transforma Proprietate pe cerc, astfel încât să putem scala fără a afecta pictograma în sine, așa că trebuie să decuplăm fundalul de pe pictogramă.

Să începem desenarea liniilor care alcătuiesc pictograma. Ce au toate în comun? Ele sunt la fel de largi, au colțuri rotunjite, sunt absolut poziționate și au o culoare de fundal. Deoarece toate liniile împărtășesc Meniu-linie Clasa, să o folosim pentru a seta aceste proprietăți partajate:

 .Menu-line {
 Culoare de fundal: # 333;
 Înălțime: 2px;
 Lățime: 100%;
 Raza de frontieră: 2px;
 Poziție: absolută;
 stânga: 0;
}

Apoi, putem folosi clasele unice ale liniilor pentru a seta poziția verticală:

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

.MENU-LINE-2 {
 Top: 0;
 Partea de jos: 0;
 Marja: Auto;
}

.menu-line-3 {partea de jos: 0; }

02. Adăugați un efect de hover

To make the menu appear clickable, we inflate the background plate on hover — Pentru a face ca meniul să apară clic, vă umflați placa de fundal pe deplasare

Să facem pictograma clipeabilă prin adăugarea unui efect de hover. În stiluri.Css. , creați un nou selector pentru Meniu-Circle. Pentru a ridica-o atunci când treceți peste meniu:

 .menu: hover .menu-cerc {transformare: scară (1.4); }

Acum putem adăuga prima noastră animație. Adăuga "Tranziție: toate 0.2s ușure-in-out" la .menu-cerc {} (nu la statul Hover). Spunem browserului să animă toate proprietățile care se pot schimba .Menu-cerc. . Deci, atunci când o sculim pe deplasare, se animă pe parcursul a 0,2 secunde față de noul său stat, cu o funcție de sincronizare a ușurință .

De unde știți ce funcție de distribuție să alegeți? Mai întâi de toate, evitați utilizarea unei funcții liniare de sincronizare. Puține lucruri din lumea reală se deplasează la o viteză perfect constantă, astfel încât obiectele animate cu o funcție liniară de calendare tind să se uite nefiresc și rigid (așa cum ar fi spus Einstein, "Dumnezeu nu joacă zaruri cu o funcție liniară").

Ca o regulă de bază, ușurință funcționează excelent pentru prezentarea unor obiecte noi și ușurință Funcționează excelent pentru îndepărtarea obiectelor. Și când aveți îndoieli, ușurință Este o funcție de sincronizare solidă pentru a implicit: Are un început lent și un sfârșit lent, creând o animație lină și fluidă.

03. Afișați și ascundeți meniul

Să folosim jQuery pentru a arăta și a ascunde suprapunerea noastră nou creată. În Script.js. , comutați clasa deschis pe .Menu-suprapunere În interiorul manipulatorului de clicuri existent:

$ ("Meniu-suprapunere"). TogleClass ("deschis");

Apoi arătați suprapunerea când are o clasă de deschidere:

 .menu-suprapuneri.open {
 Opacitate: 1;
 Vizibilitate: vizibilă;
}

04. Conectați pictograma Meniu

Tranziția pe care am adăugat-o mai devreme înseamnă că avem deja un efect de decolorare curat atunci când arătăm și ascundem suprapunerea. Cu toate acestea, putem face ca acesta să arate ca fundalul meniului de meniuri devine suprapunerea meniului și mai bine conectați cele două vizuale.

Realizarea acestui efect este mai ușoară decât se pare: tot ce trebuie să facem este să măriți rapid cercul de meniu când este făcut clic. Suprapunerea va dispărea simultan, creând iluzia că pictograma meniului se transformă în suprapunere.

Trebuie să putem modela cercul meniului atunci când meniul a fost făcut clic. Deschide Script.js. , și în interiorul funcției noastre existente, comutați clasa deschisă pentru noi .meniul :

$ ("Meniu"). TogleClass ("deschis");

Acum putem viza această clasă cu CSS și extind cercul deoarece meniul este deschis. În partea de jos a stil.css. , extindeți .Menu-cerc. când .meniul are, de asemenea, o clasă de .deschis :

 .menu.open .menu-cerc {transformare: scară (60);
}

05. Transformați pictograma

The white circle expands to become the menu background, and the icon morphs into an 'X' — Cercul alb se extinde pentru a deveni fundalul meniului, iar pictograma morfează într-un "x"

Avem un efect frumos dezvăluie pentru meniul nostru, dar cum să transformăm pictograma meniului într-o pictogramă apropiată? Este surprinzător de ușor odată ce știți cum - trebuie doar să stabilim trei proprietăți CSS. În primul rând, trebuie să ascundem linia de mijloc în timp ce se arată în meniu:

 .menu.open .menu-line-2 {opacitate: 0; }

Apoi tot ce trebuie să facem este să răsturnați celelalte două linii 45 de grade în direcții opuse (liniile trebuie să indice în direcții diferite pentru a forma un "x", astfel încât una dintre linii are o rotație negativă de 45 de grade):

 .menu.open .menu-line-1 {
 Transformare: Rotire (-45DEG);
}

.Menu.open .menu-line-3 {
 Transformare: Rotiți (45DEG);
}

Un fel de. De asemenea, trebuie să centralizăm aceste două linii pe verticală. În acest moment, ați putea să vă gândiți "ușor! Trebuie doar să schimbăm top și fund poziția de a le centra ". Și ai avea dreptate - dacă nu am animat această icoană.

Deoarece putem obține doar animații accelerate hardware, limitându-ne la animarea transforma și opacitate Proprietăți, va trebui să recurgem la centrarea liniilor prin transformări.

 .menu.open .menu-line-1 {
 Transformare: Translatey (7px) Translatey (-50%) Rotire (-45DEG);
}

.Menu.open .menu-line-3 {
 Transformare: Translatey (-7px) Translatey (50%) Rotire (45DEG);
}

Aceste transformări vor mișca cele două linii, astfel încât acestea să fie centrate vertical în recipientul de pictograme și apoi să le rotească pentru a forma crucea.

Să o rupăm jos. Avem două traduceri utilizate simultan: Translatey (7px) și Translatey (-50%) . Prima transformare, Translatey (7px) , este folosit pentru a muta marginea superioară a liniei spre centrul vertical al pânzei. Matematica aici este simplă: 14 este înălțimea pictogramei noastre, împărțind-o de doi primim punctul de mijloc: 7.

A doua transformare, Translatey (-50%) , este folosit pentru a muta linia astfel încât centrul vertical al liniei, nu marginea superioară, locuiește pe punctul central vertical al panzei.

De obicei, atunci când utilizați Ondulație Conectați-vă CSS referitor la părintele unui element (setare Lățime: 100% Se potrivește cu lățimea elementului cu cea a părintelui său), dar dacă utilizați procente cu proprietatea transformării, vă referiți la elementul însuși, nu la părintele. Astfel încât să găsim înălțimea unei linii și să o mișcim în sus cu jumătate din asta, tot ce avem nevoie este Translatey (-50%) .

06. Morph între icoane

În loc să înlocuiți pictograma meniului cu pictograma apropiată, să facem morf între cele două stări.

Începeți prin adăugarea unei tranziții la .Menu-linie în stil.css. :

 Tranziție: toate 0.25s ușurinta-in-out;

Ta-da! O pictogramă de meniu morfing. Animația este puțin plictisitoare. Să rezolvăm asta. Pentru a face ca liniile să pară mai vii, le putem roti atât cu încă 90 de grade. Pictograma va arăta la fel în cele din urmă, dar liniile vor călători mai departe în aceeași perioadă de timp. Schimbați rotațiile la Rotire (-135deg) și Rotire (135deg) .

Ca o regulă de bază, puteți îmbunătăți întotdeauna o animație utilizând o curbă personalizată Bézier, care este mai bine adaptată animației dvs. În prezent, folosim ușurință - Asta înseamnă că animația va avea un început lent și se termină, cu un ritm mai rapid în mijloc.

Cred că un efect mai de primăvară este montat pentru pictograma noastră. Să o facem să se rotească rapid, cu un mic efect de bounție, așa cum se ajunge la capăt. Pentru .Menu-linie , a inlocui " ușurință-out " Cu o curbă personalizată Bézier:

 Tranziție: Toate 0,25s Cubic-Bezier (0,175, 0,885, 0,32, 1,275);

Care sunt toate numerele respective? Nu vă faceți griji: curbele Bézier sunt rareori scrise manual. Să utilizați cubic-bezier () Pentru a defini ritmul unei animații în timp, și mai degrabă decât să le scrieți pe cont propriu, vă recomandăm să utilizați un site de referință. Acest lucru provine din cauze.net. Se depășește la sfârșitul animației și creează un efect subtil de bounce.

În timp ce suntem la ea, mergeți la IaSings.net.Net. și apucați codul pentru Studiooutexpo. . Vom folosi acest lucru pentru a crea un efect mai rafinat pentru animația meniului de fundal. Actualizați tranziția .Menu-cerc. Pentru a utiliza această curbă personalizată Bézier și a face animația un pic mai mare (0.5S):

 Tranziție: TOATE 0,5S CUBIC-BEZIER (0,19, 1, 0,22, 1);

Felicitări, ați creat un set de animații care sunt semnificative: vă ajută să înțelegeți ce se întâmplă pe site în timp ce navigați, creând un sentiment de conștientizare spațială. În plus, animațiile funcționează fără probleme.

Prin animarea numai a proprietăților de transformare și opacitate, putem asigura că suportul de accelerare hardware al browserului poate să intre și să evite întârzierea inutilă. Când jucați în jur cu animații, asigurați-vă că bifați aceste două cutii: faceți-le semnificative și frumoase.

Acest articol a apărut inițial în revista netă Ediția 281. Abonați-vă la net aici .

Articole similare:

10 exemple impresionante de animație CSS3
28 Exemple remarcabile de CSS
Începeți cu accesibilitatea web

Porniți meniurile dvs. folosind animație cu CSS

Animație semnificativă

Elemente similare

01. Începeți

02. Adăugați un efect de hover

03. Afișați și ascundeți meniul

04. Conectați pictograma Meniu

05. Transformați pictograma

06. Morph între icoane

să - Cele mai populare articole

Cum să trageți un cap: un ghid complet

Tutoriale Krita: Aflați elementele de bază ale software-ului de artă digitală

Creați un material de plăci în substanța de designer de substanțe

Medii de mari dimensiuni în 3DS Max

Cum să picteze miniaturi încântătoare

Strategia de experiență a utilizatorului master

Cum să obțineți mai mult din GIF-uri

Cum se face o platformă flexibilă

Categorii