Włącz menu za pomocą animacji z CSS

Sep 17, 2025

Jak

To dzięki animacji, które mają sens świata: drzwi swingowe otwarte, samochody jeżdżą do ich miejsc, usta zwija się na uśmiechy. Nawet rzeczy, które czują się natychmiastowe, jak błyskawica uderzająca lub upuszczająca telefon na twarzy podczas korzystania z tego w łóżku, zdarzają się z czasem. Przez ten ruch, który rozumiemy, jak obiekty odnoszą się i funkcjonują; Jeśli są lekkie lub ciężkie, sztywne lub luźne, podłączone lub oddzielne, lepkie lub śliskie.

Jednak w sieci przyzwyczailiśmy się do rzeczy pojawiających się i znikając w mgnieniu oka. Klikamy na link i wszystko się zmienia. To jak prowadzenie do pokoju z zawiązanymi oczami, spinning około kilka razy i usuwając opaskę, aby wziąć w otoczeniu. Nawet nie wiesz, które drzwi zostały wprowadzone. Jest to i duży sposób budowy witryn. Możemy zrobić lepiej.

Podczas uczenia się o potencjale Animacja CSS. , To może być łatwe, aby nasze wyobraźni wchodzą do podręczników i posypać animacje na prawie wszystko. Podczas gdy animacja może być świetna, musimy być ostrożni i zawsze pytać sobie: czy ta animacja znacząca? Czy dodanie jakiejkolwiek wartości innego niż być pięknym? Czy łatwiej jest wykorzystać nasz produkt?

Znacząca animacja

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Jest to punkt wyjścia dla samouczka - menu próbki, które ujawnimy z animacją

W tym artykule pracujemy ze wspólnym Projekt UI Element: Przełącznik menu. Utworzymy menu (i ikona, aby iść z nim) z CSS i sprawi, że żyjemy animacji. Upewnimy się, że animacje są znaczące, ale także stosować najlepsze praktyki wydajności w sieci, aby zapewnić, że są jak najbardziej płynne.

Możesz Podgląd wynik końcowy tutaj . Gdy użytkownik kliknie ikonę menu rozwijamy płytę tła ikony (okrąg), aby zakryć ekran i przedstawić nakładkę menu.

Zamiast migać do bliskiej ikony, zamierzamy ożywić i morfie trzy pionowe linie (które tworzą ikonę menu) w "x", aby reprezentować bliski ikonę. Innymi słowy, ponieważ menu jest ujawnione ikona Morfy w przycisku Zamknij.

Powiązane elementy

Możesz myśleć ", czy to znacząca animacja?" Cóż, świetne pytanie. Krótka odpowiedź: tak! Dłuższa odpowiedź: Animacje są świetne w łączeniu elementów na ekranie i pokazując, jak odnoszą się do siebie.

Ponieważ skalujemy płytę tła menu, aby stać się menu, pokazujemy, jak są podłączone dwa - podobnie jak ikona aplikacji, po naciśnięciu na IOS lub Android, skala się i przejmuje ekran, pokazując, że aplikacja została uruchomiona Ta bardzo ikona. Nasza ikona menu nie tylko przełączająca menu: Jest to menu, tylko zawinięte.

Podobnie, tak jak przełączanie włączania / wyłączania przekształca się między jego włączony stan włączony, po naciśnięciu na IOS, naszym przełącznikiem menu zmieni się między ikoną menu i zamkniętej ikony w zależności od tego, czy menu naszej witryny jest widoczne lub ukryte. Pomaga to egzekwować ideę, że dwie ikony działają w podobny sposób: obaj sterują menu.

Tak więc, abyśmy mogli wykorzystać naszą witrynę, ułatwiamy również zrozumienie i ulepszanie doświadczenie użytkownika tak nieznacznie.

Zobacz, jak to zrobić w powyższym samouczku wideo i pisemnych krokach poniżej.

01. Zacznij

By drawing the menu icon with CSS (and no images), we can easily animate it later — Rysując ikonę menu z CSS (i bez obrazów), możemy łatwo animować go później

Pobierz pliki projektu . Otworzyć index.html. W przeglądarce i powinieneś zobaczyć trzy duże linki na białym tle. To jest nakładka menu, którą ujawnimy.

Przede wszystkim musimy to ukryć. W Style.css.css. , dodaj te style do .menu-nakładka :

 Krycie: 0;
Widoczność: ukryta;

W zniknął nakładki, przycisk powinien pojawić się w lewym górnym rogu. Narysujmy tutaj ikonę menu, więc jest coś do kliknięcia, aby pokazać nakładkę. Aby łatwo było animować, narysujemy go przy użyciu tylko HTML i CSS; Brak bitmapów ani wektory. Mamy już trochę HTML index.html. W menu: kontener ( .menu ), tło ( .menu-Circle. ), link ( .menu-link. ) i ikona ( .menu-Ikona ) z jednym rozpiętością dla każdej linii.

Oddzielne div. Dla tła jest nieco niekonwencjonalne podejście. Gdybyśmy nie bylimy dodawać animacji do tego kręgu, nie potrzebowalibyśmy osobne div. ; Możemy po prostu dodać Radius i kolor tła do naszego Menu-link. .

Jednak chcemy być swobodnie korzystać z przekształcać Nieruchomość na okręgu, więc możemy go skalować bez wpływu na samą ikonę, więc musimy oddzielić tło z ikony.

Zacznijmy rysować linie, które tworzą ikonę. Co oni wszyscy mają ze sobą wspólnego? Są one równie szerokie, mają zaokrąglone narożniki, są absolutnie ustawione, i mają kolor tła. Ponieważ wszystkie linie dzielą się menu linia Klasa, użyj go, aby ustawić te wspólne właściwości:

 .menu-line {
 kolor-kolor: # 333;
 Wysokość: 2px;
 Szerokość: 100%;
 Border-Radius: 2px;
 pozycja: absolutna;
 Po lewej: 0;
}

Następnie możemy użyć unikalnych klas linii, aby ustawić pozycję pionową:

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

.menu-line-2 {
 Top: 0;
 Dół: 0;
 Marża: Auto;
}

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

02. Dodaj efekt Hover

To make the menu appear clickable, we inflate the background plate on hover — Aby menu pojawi się kliknięte, napełnijmy płytkę tła na HOVER

Spraw, aby ikona wyraźnie klikalna przez dodanie efektu wśród. W Style.css.css. , utwórz nowy selektor Menu-Circle. Aby go skalować, gdy najeżdżasz w menu:

 .menu: Hover .menu-Circle {Transform: Skala (1,4); }

Teraz możemy dodać naszą pierwszą animację. Dodaj "Przejście: Wszystkie 0.2s Ease-Out" do .menu-circle {} (Nie do stanu wlewu). Opowiadamy przeglądarce do ożywienia wszystkich nieruchomości, które mogą się zmienić .menu-Circle. . Więc kiedy skalujemy go na Hover, animuje w ciągu 0,2 sekundy do swojego nowego stanu, z funkcją czasową łatwość out .

Skąd wiesz, która funkcja czasu do wyboru? Przede wszystkim unikaj używania funkcji liniowej. Kilka rzeczy w prawdziwym świecie porusza się na doskonale stałej prędkości, więc obiekty animowane z liniową funkcją czasową zazwyczaj wyglądają nienaturalne i sztywne (jak powiedziała Einstein ", powiedział Bóg nie odtwarza kości z liniową funkcją czasową").

Jako zasada, z łatwością działa świetnie do prezentacji nowych obiektów i łatwość Działa świetnie do usuwania obiektów. I kiedy wątpiący łatwość out Jest to stała funkcja czasu domyślna do: ma powolny początek i powoli zakończenie, tworząc płynną i płynną animację.

03. Pokaż i ukryj menu

Użyjmy jQuery, aby pokazać i ukryć naszą nowo utworzoną nakładkę. W Script.js. , przełącz klasę otwarty na .menu-nakładka Wewnątrz istniejącego kliknięcia:

  $ (". Nakładka menu"). ToggleClass ("Open");

Następnie pokaż nakładkę, gdy ma klasę otwartej:

 .menu-nakładka.Open {
 nieprzezroczystość: 1;
 Widoczność: widoczna;
}

04. Podłącz ikonę menu

Przejście, które dodaliśmy wcześniej, że mamy już schludny efekt zanikający, gdy pokazujemy i ukrywamy nakładkę. Jednak możemy sprawić, że wygląda jak tło ikona menu staje się nakładką menu i lepiej podłączyć dwa wizualnie.

Osiągnięcie tego efektu jest łatwiejsze niż wydaje się: wszystko, co musimy zrobić, to szybko powiększyć koło menu, gdy zostanie kliknięty. Nakładka zniknie jednocześnie, tworząc iluzję, że ikona menu przekształca się w nakładkę.

Musimy być w stanie stylować koło menu, gdy menu zostało kliknięte. Otworzyć Script.js. i wewnątrz naszej istniejącej funkcji kliknięcia przełączają klasę otwarte dla naszego .menu :

  $ (". Menu"). ToggleClass ("Open");

Teraz możemy kierować tę klasę z CSS i rozszerzyć koło, ponieważ menu jest otwarte. Na samym dole Style.csss. , rozwiń .menu-Circle. gdy .menu ma również klasę .otwarty :

 .menu.Open .menu-Circle {Transform: Skala (60);
}

05. Przekształć ikonę

The white circle expands to become the menu background, and the icon morphs into an 'X' — Białe koło rozszerza się, aby stać się tłem menu, a ikona marek w "X"

Mamy piękny efekt ujawnienia dla naszego menu, ale jak włączyć ikonę menu do bliskiej ikony? To zaskakująco łatwe, gdy wiesz, jak - będziemy musieli ustawić trzy właściwości CSS. Po pierwsze, musimy ukryć środkową linię, gdy menu jest pokazane:

 .menu.Open .menu-line-2 {nieprzezroczystość: 0; }

Następnie wszystko, co musimy zrobić, to odwrócić pozostałe dwie linie 45 stopni w przeciwnych kierunkach (linie muszą wskazać w różnych kierunkach, aby utworzyć "X", więc zauważ, jak jedna z linii ma negatywny obrót 45 stopni):

 .menu.open .menu-line-1 {
 Transform: Obróć (-45deg);
}

.menu.open .menu-line-3 {
 Transform: Obróć (45deg);
}

Cóż, rodzaj. Musimy także wyśrodkować te dwie linie pionowo. W tym momencie możesz myśleć "łatwy! Musimy tylko zmienić Top i Dolny pozycja, aby je wyśrodkować ". I miałbyś rację - jeśli nie byliśmy animowani tej ikony.

Ponieważ możemy osiągnąć animacje przyspieszone sprzętowo, ograniczając się do animowania przekształcać i nieprzezroczystość Właściwości, będziemy musieli uciekać się do centrowania linii poprzez transformacje.

 .menu.open .menu-line-1 {
 Transform: Translatey (7px) Translatey (-50%) Obróć (-45deg);
}

.menu.open .menu-line-3 {
 Transform: Translatey (-7px) Translatey (50%) Obróć (45deg);
}

Te transformacje przesuną dwie linie, więc są one w pionie w kontenerze ikonę, a następnie obracają je, aby utworzyć krzyż.

Przełammy go. Mamy jednocześnie dwa tłumaczenia: Translatey (7px) i Translatey (-50%) . Pierwsza transformacja, Translatey (7px) , służy do przenoszenia górnej krawędzi linii do pionowego środka płótna. Matematyka jest tutaj prosta: 14 jest wysokością naszej ikony, dzieląc go przez dwa, otrzymujemy środkowy punkt: 7.

Druga transformacja, Translatey (-50%) , jest używany do przemieszczania linii, tak że pionowe centrum linii, a nie jego górną krawędź, mieszka na pionowym punkcie środkowym płótna.

Zwykle przy użyciu Władze Zaloguj się CSS, odnoszą się do rodzica elementu (ustawienie Szerokość: 100% Dopasowuje szerokość elementu do jego rodzica), ale jeśli używasz procentów z właściwością transformacji, odwołujesz się do samego elementu, a nie rodzic. Dla nas, aby znaleźć wysokość linii i przenieść go w górę o połowę, wszystko, czego potrzebujemy Translatey (-50%) .

06. Morph między ikonami

Zamiast włączyć ikonę menu z ikoną bliskiej, pomiędzy dwoma stanami.

Zacznij od dodawania przejścia do .menu-line. w Style.csss. :

 Przejście: wszystkie 0,25s łatwość out-out;

Ta-da! Ikona menu morfalnego. Animacja jest jednak trochę nudna. Naprawmy to. Aby linie wydają się bardziej żywe, możemy obracać je zarówno dodatkowe 90 stopni. Ikona będzie wyglądać tak samo w końcu, ale linie będą dalej podróżować w tym samym okresie. Zmień obroty do Obróć (-135deg) i Obróć (135deg) .

Zasadą, że zawsze możesz poprawić animację za pomocą niestandardowej krzywej Bézier, która jest lepiej dostosowana do animacji. Obecnie używamy łatwość out - Oznacza to, że animacja będzie miała powolny początek i zakończenie, z szybszym tempem w środku.

Myślę, że bardziej sprężynowy efekt pasuje do naszej ikony. Utrudnimy szybko, z małym efektem odbicia, co do końca. Dla .menu-line. , zastąpić " łatwość out " Z niestandardową krzywą Bézier:

 Przejście: wszystkie 0,25S sześcienne (0,175, 0,885, 0,32, 1,275);

Jakie są te liczby? Nie martw się: krzywe Bézier rzadko napisane ręcznie. Używasz sześciennik-bezier () Aby zdefiniować tempo animacji z czasem, a nie napisanie ich na własną rękę, zalecam użycie witryny odniesienia. Pochodzi z ewaluli. Przekracza się na końcu animacji i tworzy subtelny efekt odbicia.

Kiedy jesteśmy na tym, idź ewodyks.net. i złap kod uaktualnij . Użyjemy tego, aby utworzyć bardziej wyrafinowany efekt dla animacji menu. Zaktualizuj przejście .menu-Circle. Aby użyć tej niestandardowej krzywej Béziera i uczynić animację nieco dłużej (0,5s):

 Przejście: WSZYSTKIE 0,5S KUBICA (0,19, 1, 0,22, 1);

Gratulacje, stworzyłeś zestaw animacji, które są znaczące: pomagają zrozumieć, co dzieje się na miejscu podczas nawigacji, tworząc poczucie świadomości przestrzennej. Ponadto animacje działają płynnie.

Poprzez jedynie ożywiając właściwości transformacji i krycia, możemy upewnić się, że wsparcie przyspieszenia sprzętu przeglądarki może się kopać i uniknąć niepotrzebnego opóźnienia. Podczas gry z animacji upewnij się, że zaznaczysz te dwa pudełka: uczynić je sensownym i pięknym.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 281. Subskrybuj netto tutaj .

Powiązane artykuły:

10 imponujących przykładów animacji CSS3
28 Znakomite przykłady CSS
Zacznij od dostępności internetowej

Włącz menu za pomocą animacji z CSS

Znacząca animacja

Powiązane elementy

01. Zacznij

02. Dodaj efekt Hover

03. Pokaż i ukryj menu

04. Podłącz ikonę menu

05. Przekształć ikonę

06. Morph między ikonami

Jak - Najpopularniejsze artykuły

Jak narysować lew

Jak narysować kot

Designer powinowactwo: Jak korzystać z narzędzi do pióra

Jak utworzyć robot papierowy

Odbuduj stronę Flash 2004 na 2018

Zrozumienie właściwości wyświetlania CSS

Najlepszy przewodnik po kompozycji obrazów w Photoshopie

10 Top Tutorials Houdini

Kategorie