A MENUS AIMÁCIÓK HASZNÁLATA CSS-vel

Ez az animáción keresztül van, hogy a világnak érezzük magunkat: az ajtók nyitottak, autók vezetnek a célállomásukhoz, az ajkak mosolyognak. Még azok a dolgok, amelyek pillanatnyira érzik magukat, mint a villámcsapás vagy a telefon az arcodon, miközben az ágyban használják, idővel történnek. Ez a mozgáson keresztül értjük, hogy az objektumok hogyan kapcsolódnak és működnek; Ha könnyű vagy nehéz, merev vagy laza, összekapcsolt vagy külön, ragacsos vagy csúszós.

Az interneten azonban megszoktuk a dolgok megjelenését és eltűnését a szem villogásában. Egy linkre kattintunk, és minden megváltozik. Olyan, mintha egy szobába húzódna, néhányszor körül forog, és eltávolítja a vakokat, hogy vegye be a környéket. Nem is tudod, hogy melyik ajtóba lépett. Ez az és nagy, hogy a legtöbb webhely épül. Jobban tehetünk.

Amikor megtanulják a potenciálját CSS animáció , Könnyű lehet hagyni, hogy a képzeletünk hyperdrive-ba menjen, és mindent megszórjuk az animációkat. Míg az animáció nagyszerű lehet, óvatosnak kell lennünk, és mindig kérdezzünk magunkat: ez az animáció értelmes? Ez hozzáadott értéket ad hozzá, mint a szép? A termékünk könnyebben használható?

Értelmes animáció

Ebben a cikkben közösen dolgozunk Ui design Element: A menü váltás. Meg fogjuk hozni a menüt (és egy ikont, hogy menjen vele) a CSS-vel, és életben van az animációkkal. Biztosítjuk, hogy az animációk értelmesek legyenek, de alkalmazzák a webes teljesítmény legjobb gyakorlatát, hogy biztosítsák őket, amennyire csak lehetséges.

tudsz A végeredmény előnézete itt . Amikor a felhasználó rákattint a menü ikonra, bővülünk az ikon háttérlemezének (egy kör), hogy lefedje a képernyőt, és bemutassa a menüfedelet.

Ahelyett, hogy csak a flash szoros ikon, megyünk az élő és Morph a három függőleges vonal (mely a menü ikon) egy „X”, hogy képviselje a közeli ikonra. Más szóval, mivel a menü feltárja az ikon morphs egy közeli gomb.

Kapcsolódó elemek

Lehet, hogy gondolkodsz így, ez egy értelmes animáció? Nos, nagy kérdés. Rövid válasz: Igen! Hosszabb válasz: Az animációk nagyszerűek a képernyőn lévő elemeken, és megmutatják, hogyan kapcsolódnak egymáshoz.

Ahogy a menüből a menübe lépünk a menübe, megmutatjuk, hogy a kettő hogyan csatlakozik - hasonlóan egy alkalmazás ikon, amikor megnyomja az iOS-t vagy az Androidot, mérlegelje és átveszi a képernyőt, azt mutatja, hogy az alkalmazás elindult Ez nagyon ikon. Menü ikonunk nem csak átkapcsolja a menüt: ez a menü, csak összeomlott.

Hasonlóképpen, mint, hogyan kell egy on / off kapcsoló transzformáció közötti be- és kikapcsolt állapotban, ha megnyomja az iOS, étlapunkon kampós fog változni között egy ikont és egy közeli ikon attól függően, hogy oldalunk menü látható vagy rejtett. Ez segít abban az elképzelést, hogy a két ikon hasonló módon működik: mindkettő vezérli a menüt.

Tehát miközben a webhelyünket szórakoztatjuk használni, akkor is könnyebb megérteni, és javítjuk a felhasználói tapasztalat annyira enyhén.

Nézze meg, hogyan kell ezt tenni a fenti és az alábbi lépéseket.

01. Kezdje el

Töltse le a projektfájlokat . Nyit index.html Böngészőben, és három nagy linket kell látnod fehér alapon. Ez a menüfedés, amit felfedezünk.

Először is el kell rejtenie. Ban ben styles.css , adja hozzá ezeket a stílusokat .menu-átfedés :

 Opacity: 0;
Láthatóság: Rejtett; 

Az átfedés eltűnt, egy gomb jelenik meg a bal felső sarokban. Rajzoljuk a menü ikonját itt, így van valami, amire kattint, hogy megmutassa az átfedés. Annak érdekében, hogy könnyen animáljunk, csak HTML és CSS használatával rajzoljuk; Nincs bittérképek vagy vektorok. Már van néhány html index.html A menüben: egy tartály ( .menü ), háttér ( .menu-kör ), egy link ( .menu-link ) és az ikon ( .menu-ikon ) Az egyes sorok egy hossza.

Különálló div A háttérben kissé nem szokásos megközelítés. Ha nem tudnánk hozzáadni animációkat erre a körre, akkor nem kell külön div ; Csak adhatnánk a határ sugara és a háttérszín a miénk menü-link .

Ugyanakkor szabadon szeretnénk használni a átalakít Tulajdonos a körön, így képesek lehetnünk, anélkül, hogy befolyásolnánk az ikont, ezért meg kell tennünk a hátteret az ikonról.

Elkezdjük rajzolni az ikont alkotó vonalakat. Mit jelentenek közösek? Ugyanakkor szélesek, lekerekített sarkok vannak, teljesen elhelyezve vannak, és háttérszínük van. Mivel az összes vonal megosztja a menüsor osztály, használjuk meg ezeket a megosztott tulajdonságokat:

 .menu-line {
 Háttérszín: # 333;
 Magasság: 2px;
 Szélesség: 100%;
 Border-RADIUS: 2PX;
 Pozíció: abszolút;
 Bal: 0;
} 

Ezután a vonalak egyedi osztályait használhatjuk a függőleges pozíció beállításához:

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

.menu-line-2 {
 Top: 0;
 alsó: 0;
 Margó: Auto;
}

.menu-line-3 {alul: 0; } 

02. HOGY A HOVER EFFECT

Tegyük az ikont egyértelműen kattintva a lebegő hatás hozzáadásával. Ban ben styles.css , hozzon létre egy új választót menükör A menü feletti lebegés esetén:

 .menu: Hover .menu kör {transzformáció: skála (1.4); } 

Most hozzáadhatjuk az első animációt. Hozzáad "Átmenet: minden 0,2-es könnyű-in-out" nak nek .menu-kör {} (nem a lebegő állapotba). Elmondjuk a böngészőnek, hogy animáljon minden olyan tulajdonságot, amely megváltoztathatja .menu-kör . Tehát amikor lebegnénk, az animálja a 0,2 másodpercet az új állapotához, időzítési funkcióval könnyű-in-out .

Honnan tudja, hogy melyik időzítési funkció válasszon? Először is, ne használjon lineáris időzítési funkciót. Kevés dolog van a világban lépést egy tökéletesen állandó sebesség, így a tárgyak animált lineáris időzítés funkció inkább nézni természetellenes és merev (mint Einstein volna azt mondta: „Isten nem szerencsejátékos lineáris időzítés funkció”).

Mint egy ökölszabály, kielégít nagyszerűen dolgozik az új tárgyak bemutatásához, és könnyű-in nagyszerűen dolgozik az objektumok eltávolításához. És ha kétségei vannak, könnyű-in-out Teljes időzítési funkció az alapértelmezettnek: lassú kezdete és lassú vége van, sima és folyékony animációt hoz létre.

03. A menü megjelenítése és elrejtése

Használjuk a JQUERY-t, hogy megmutassam és elrejtsük az újonnan létrehozott átfedést. Ban ben script.js , váltson az osztályt nyisd ki tovább .menu-átfedés A meglévő kattintási kezelőn belül:

  $ (". Menü-átfedés"). ToggleClass ("nyitott"); 

Ezután mutassa meg az átfedést, amikor nyitott osztályú:

 .menu-overlay.open {
 Opacity: 1;
 Láthatóság: látható;
} 

04. Csatlakoztassa a menü ikont

A korábban hozzáadott átmenet azt jelenti, hogy már van egy tiszta elhalványított hatásunk, amikor bemutatjuk és elrejtjük az átfedést. Azonban úgy nézhetünk ki, hogy úgy nézzen ki, mint a menü ikonja a menü átfedése, és jobban csatlakoztassa a két vizuálisan.

Ennek a hatásnak az elérése könnyebb, mint amilyennek tűnik: mindössze annyit kell tennie, hogy gyorsan bővítsük a menüködikt, amikor rákattintanak. Az átfedés egyidejűleg elhalványul, ami megteremti az illúziót, hogy a menü ikon átfedése az átfedésbe.

Meg kell tudnunk stílusozni a menü kört, ha a menü kattintott. Nyit script.js , és a meglévő kattintás funkciónkat az osztály megnyitja az osztályunkat .menü :

  $ (". menü"). ToggleClass ("nyitott"); 

Most CSS-vel célozhatjuk meg ezt az osztályt, és bővíthetjük a kört, ahogy a menü megnyílik. Az alján style.css , bontsa ki a .menu-kör amikor .menü is van egy osztálya .nyisd ki :

 .menu.open .menu-kör {transzformáció: skála (60);
} 

05. Átalakítsa az ikont

Van egy gyönyörű felfedési hatása a menüünkre, de hogyan kapcsoljuk be a menü ikonját egy közeli ikonra? Meglepő módon egyszerű, ha tudod, hogyan kell csak három CSS tulajdonságot beállítani. Először ki kell rejtenie a középvonalat, amíg a menü megjelenik:

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

Aztán mindössze annyit kell tennünk, hogy a másik két vonalat 45 fokos ellenkező irányba fordítsa (a vonalaknak különböző irányokba kell mutatniuk, hogy "x" -ot képezzenek, ezért vegye figyelembe, hogy az egyik vonal negatív forgása 45 fokos elforgatásával):

 .menu.open .menu-line-1 {
 Átalakítás: forgatás (-45deg);
}

.menu.Open .menu-line-3 {
 Átalakítás: forgatás (45deg);
} 

Nos, valami. A két vonalat függőlegesen kell kiemelnie. Ezen a ponton egyszerűen gondolkodhatsz! Csak meg kell változtatnunk a top és alsó pozíció a középpontba ". És igazad lenne - ha nem tudnánk animálni ezt az ikont.

Mivel csak hardver-gyorsított animációkat tudunk elérni azzal, hogy korlátozzuk magunkat a átalakít és átlátszatlanság Tulajdonságok, a vonalak középpontjába kell mennünk átalakításokon keresztül.

 .menu.open .menu-line-1 {
 Átalakítás: Fordítás (7px) Fordítás (-50%) Forgatás (-45deg);
}

.menu.Open .menu-line-3 {
 Átalakítás: Fordítás (-7PX) Fordítás (50%) Forgatás (45DEG);
} 

Ezek a transzformációk mozgatják a két sort, hogy az ikon konténerben függőlegesen középre kerüljenek, majd forgassa őket a kereszt kialakításához.

Tartsuk le. Két fordításunk van egyidejűleg: Fordítás (7px) és Fordítás (-50%) . Az első átalakítás, Fordítás (7px) , a vonal felső szélének mozgatására szolgál a vászon victális központjához. A matematika itt egyszerű: 14 az ikonunk magassága, kettővel osztva a középső pontot: 7.

A második átalakulás, Fordítás (-50%) , a vonal mozgatására szolgál, így a vonal függőleges középpontja, nem a felső széle, a vászon függőleges középpontjában található.

Általában a % Jelentkezzen be a CSS-ben, amely egy elem szülőjére hivatkozik (beállítás) Szélesség: 100% Megegyezik az elem szélességével a szülőjéhez), de ha az átalakítási tulajdonsággal rendelkező százalékokat használja, akkor maga az elemre vonatkozik, nem pedig a szülőre. Tehát számunkra, hogy megtaláljunk egy vonal magasságait, és felfelé mozgassuk, mindazt, amire szükségünk van Fordítás (-50%) .

06. Morph az ikonok között

Ahelyett, hogy a menü ikonját a közeli ikonra cserélném, Morph a két állam között.

Indítsa el az átmenet hozzáadásával .menu-vonal ban ben style.css :

 Átmenet: mind a 0.25-es évek enyhítése; 

Ta-da! Morphing menü ikon. Az animáció azonban egy kicsit unalmas. Javítsuk meg. Ahhoz, hogy a vonalak élénkebbé váljanak, mindkettő további 90 fokkal elforgathatjuk őket. Az ikon a végén ugyanaz lesz, de a vonalak ugyanabban az időszakban tovább utaznak. Változtassa meg a forgást forgat (-135deg) és Forgatás (135deg) .

A hüvelykujj szabályként mindig javíthat egy animációt egy egyedi Bézier görbe használatával, amely jobban illeszkedik az animációhoz. Jelenleg használjuk könnyű-in-out - Ez azt jelenti, hogy az animáció lassú kezdet és véget ér, a közepén gyorsabb ütemben.

Azt hiszem, egy tavaszi hatású hatás illeszkedik az ikonunkra. Gyorsan forgassunk, egy kis ugrálási hatással, amikor véget ér. -Ért .menu-vonal , cserélje ki " Könnyű-in-out " Egyedi Bézier görbe:

 Átmenet: mind a 0,25-es kocka-bezier (0,175, 0,885, 0,32, 1,275); 

Melyek az összes szám? Ne aggódj: a Bézier görbék ritkán kerülnek kézzel. Használod Cubic-Bezier () Az animáció ütemének meghatározása idővel, és ahelyett, hogy önmagában írja, javaslom egy referenciapontot. Ez a könnyebbek.net. Az animáció végén túllépi, és finom ugróhatást eredményez.

Miközben ránk vagyunk, menj könnyítések.net és megragadja a kódot öröklécexpo . Ezt használjuk, hogy a menü háttér animációjának finomabb hatása legyen. Frissítse az átmenetet .menu-kör Az egyéni Bézier görbe használata, és az animáció kicsit hosszabb (0,5S):

 Átmenet: mind a 0,5s köbösbezier (0,19, 1, 0,22, 1); 

Gratulálok, létrehoztál egy olyan animációt, amelyek értelmesek: segítenek megérteni, hogy mi történik a helyszínen, miközben navigálja, a térbeli tudatosság érzését. Ezen felül az animációk zökkenőmentesen futnak.

Azáltal, hogy csak animált transzformáció és átlátszóságát tulajdonságait, tudjuk, hogy ellenőrizze, hogy a böngésző hardveres támogatással tud rúgni, és a felesleges lag. Amikor az animációkkal játszik, győződjön meg róla, hogy jelölje be ezeket a két doboz: tegye őket értelmes és gyönyörű.

Ez a cikk eredetileg megjelent net magazin 281 kiadása. Iratkozzon fel itt Netre .

Kapcsolódó cikkek:

• 10 A CSS3 animáció lenyűgöző példái
• 28 A CSS kiemelkedő példái
• Kezdje el a webes hozzáférhetőséget