Udekoruj swoją witrynę, korzystając z tych wskazówek i sztuczek dotyczących animacji.
Animacje i przejścia są ważną częścią projektowania stron internetowych. Dodanie subtelnych animacji do Twojej strony internetowej sprawi, że będzie ona bardziej wciągająca. Proste animacje, takie jak animowane ikony, typografia kinetyczna i animowane logo, mogą poprawić wrażenia użytkownika. Poznaj pięć niesamowitych sztuczek animacyjnych, które pomogą Ci ożywić Twoją witrynę.
1. Transformacja elementu po najechaniu kursorem
Jedną z powszechnych praktyk projektowych jest posiadanie elementu, który skaluje się podczas interakcji. Na przykład możesz chcieć przesunąć przyciski nieco w górę, gdy ktoś najedzie na nie myszką. Możesz to osiągnąć za pomocą CSS przekształcać nieruchomość.
Zakładając, że masz przycisk:
<przycisk>
Kliknij
przycisk>
Stylizowałeś treść dokumentu oraz przycisk:
/* Wyrównuje przycisk do środka strony */
ciało {
wyświetlacz: przewód;
wysokość: 100vh;
wyrównaj elementy: Centrum;
uzasadnij treść: Centrum;
kolor tła: czarny;
}/* Stylizuje przycisk */
przycisk {
wyściółka: 1oni 2oni;
tło: niebieski;
granica: 0;
kolor: biały;
promień granicy: 0.25rem;
kursor: wskaźnik;
rozmiar czcionki: 2Rem;
przemiana: przekształcać 500SM;
}
/* Stany najechania */
przycisk:unosić się,
przycisk:centrum {
przekształcać: przetłumacz Y(0.75rem) 500SM;
}
Ostatnim blokiem ustawiasz stan najechania i skupienia na przycisku. W obu stanach przesuwasz przycisk wzdłuż osi Y o 0,75rem. Przycisk wyglądałby tak:
Po najechaniu myszką na przycisk przesuwa się on w górę. Przejście trwa pół sekundy (500 ms). Jest to wzór, który możesz zaimplementować nie tylko na swoich przyciskach, ale także na innych elementach (np. obrazkach).
2. Deklarowanie wielu klatek kluczowych za pomocą jednej deklaracji
Innym powszechnym wzorcem w animacjach CSS jest wielokrotne powtarzanie tej samej wartości. Może to być określony kolor, rozmiar lub orientacja. Możesz to osiągnąć za pomocą Animacje klatek kluczowych CSS deklarując wiele klatek kluczowych w jednej deklaracji.
Rozważ przycisk utworzony w poprzedniej sekcji. Może chcesz iterować po kilku kolorach tła po kliknięciu przycisku. Ale chcesz także przejść przez ten sam kolor na różnych etapach animacji. Zobaczmy, jak to osiągnąć w kodzie.
Po pierwsze, chcesz animować przycisk tylko po kliknięciu. Więc stworzyłbyś skrypt.js plik, w którym uzyskujesz dostęp do przycisku i przełączasz klasę na przycisku po jego kliknięciu:
konst przycisk = dokument.querySelector("przycisk")
button.addEventListener("Kliknij", (e) => {
button.classList.toggle('czas na imprezę')
})
Użyliśmy querySelector, aby uzyskać dostęp do przycisku ze strony internetowej. Aby dowiedzieć się więcej o przemierzaniu DOM, przeczytaj nasz post na jak przemierzać DOM za pomocą JavaScript.
The czas na imprezę class aktywuje animację pt impreza:
.czas na imprezę {
animacja: impreza 2000SMnieskończony;
}
W przypadku animacji chcesz zacząć od czerwieni i przejść do żółtego przy 25%. Następnie wrócisz do czerwieni przy 50%, zanim wrócisz do żółtego przy 75%. Wreszcie, przy 100%, zadowoliłbyś się ciemnoniebieskim kolorem:
@klatki kluczowe impreza {
0%, 50% {
kolor tła: czerwony;
}
25%, 75% {
kolor tła: żółty;
}
100% {
kolor tła: hsl(200, 72%, 35%);
}
}
Takie podejście jest całkiem przydatne do naprzemiennego przełączania kolorów na tle opartym na kolorach. Ponieważ możesz powtarzać wiele klatek kluczowych w jednej zmiennej, bardzo łatwo jest używać tej samej właściwości na różnych etapach animacji.
3. Używanie @property do animacji dostosowanych właściwości
Jak być może już wiesz, nie wszystkie właściwości w CSS można animować. Oficjalny Dokumentacja Mozilli przechowuje zaktualizowany zapis wszystkich animowalnych właściwości CSS. Jeśli chcesz animować właściwość, której nie można animować, najlepszym rozwiązaniem byłoby użycie metody @nieruchomość dyrektywa.
Zacznij od zmiany koloru tła przycisku na gradient liniowy:
przycisk {
// InnyCSS
tło: gradient liniowy(90stopień, niebieski, zielony);
// InnyCSS
}
Oto dane wyjściowe:
Często chcesz animować gradient kolorów na przycisku. Chociaż istnieją sztuczki, których można użyć do przesuwania gradientu, w rzeczywistości nie można go animować. To dlatego, że tło (jak również zdjęcie w tle) nie jest właściwością animowaną. To jest gdzie @nieruchomość wchodzi.
The @nieruchomość Dyrektywa umożliwia rejestrację właściwości niestandardowych. Kiedy używasz @nieruchomość, musisz podać mu trzy wartości, a mianowicie składnia, dziedziczy, I wartość początkowa:
@nieruchomość --kolor-1 {
składnia: "<kolor>";
dziedziczy: PRAWDA;
wartość początkowa: czerwony;
}
@nieruchomość --kolor-2 {
składnia: "<kolor>";
dziedziczy: PRAWDA;
wartość początkowa: niebieski;
}
Pierwsza to właściwość początkowa, a druga to właściwość docelowa. Teraz zamiast przenosić obraz tła (którego nie można przenieść), przechodzisz z niego --kolor-1 Do --kolor-2 (twoje niestandardowe właściwości) w ciągu jednej sekundy:
przycisk {
przemiana: --kolor-1 1000SM, --kolor-2 1000SM;
}
Ta technika jest przydatna, ponieważ można również dodawać inne dostosowania. Na przykład dodajesz opóźnienie, aby uzyskać płynniejsze wrażenia. Możliwości są nieskończone.
4. Korzystanie z ujemnych opóźnień animacji
Opóźnienia animacji są kluczowe dla tworzenia płynnych animacji. Zobaczmy przykład tego w działaniu. W tej części dodaj a dz element z 15 kropkami na górze przycisku:
<dzklasa="kropki">
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
<dzklasa="kropka">dz>
dz>
Oto kilka podstawowych stylizacji, które odmienią każde dziecko dz w kropkę:
.kropki {
wyświetlacz: przewód;
luka: .5 rem;
margines-dolny: 20piks;
}
.kropka {
szerokość: 10piks;
współczynnik proporcji: 1;
kolor tła: czerwony;
promień granicy: 50%;
}
Tutaj używamy Flexbox do umieszczenia kropek w linii poziomej. Aby zagłębić się w Flexbox, możesz sprawdzić nasze Samouczek CSS Flexbox.
Wewnątrz skrypt.js, dodaj kod uruchamiający animację kropek. Przełączasz taniec klasa w kropki:
button.addEventListener("Kliknij", (e) => {
button.classList.toggle('czas na imprezę')
// Nowy kod
kropki.dlaKażdego((kropka) => {
dot.classList.toggle('taniec')
})
})
Lekcja tańca uruchamia animację pt wzrastać:
.kropka.taniec {
animacja: wzrastać 2000SMnieskończonyalternatywny;
}Jeśli chodzi o animację, po prostu przetłumacz kropki -100px wzdłuż osi Y:
@klatki kluczowe wzrastać {
100% {
przekształcać: przetłumacz Y(-100px)
}
}Teraz pora zrobić coś ciekawego. Zamiast kropek rosnących w tym samym czasie, chcesz animować kropki, aby płynęły jak fala. Aby to osiągnąć, musisz dodać opóźnienie animacji do kropek i zwiększ każdą kropkę o 100ms:
.kropka:n-te dziecko (1) {
opóźnienie animacji: 100SM;
}
.kropka:n-te dziecko (2) {
opóźnienie animacji: 200SM;
}
.kropka:n-te dziecko (3) {
opóźnienie animacji: 300SM;
}
.kropka:n-te dziecko (4) {
opóźnienie animacji: 400SM;
}
/* Kontynuuj, aż dojdziesz do 15. kropki */
Tworzy to elegancką animację, w której kropki poruszają się w górę iw dół w falistym kształcie. Poniższy obraz przedstawia kropki w środku animacji:
Pamiętaj, że może to być problematyczne, co prowadzi nas do piątej wskazówki.
5. Użyj preferencji-reduced-motion, aby włączyć preferencje
Zawsze pamiętaj, że wiele osób nie lubi animacji opartych na ruchu. W rzeczywistości większość użytkowników ma preferencje w przeglądarce, które mogą wyłączyć ruch. Ruch może rozpraszać zmysły, aw ciężkich przypadkach prowadzić do nudności.
Na szczęście możesz łatwo sobie z tym poradzić, zawijając animację w bez preferencji zapytanie o media takie jak:
@głoska bezdźwięczna(preferuje-zredukowany-ruch: brak preferencji) {
.kropka.taniec {
animacja: wzrastać 2000SMnieskończonyalternatywny;
}
}Teraz, jeśli chcesz włączyć preferuje-zredukowany-ruch w przeglądarce, animacja się nie uruchomi.
Dowiedz się więcej porad i wskazówek dotyczących CSS
CSS jest pełen niesamowitych hacków, które wykraczają poza animacje i przejścia. Na przykład istnieją porady i wskazówki, jak sprawić, by cały układ był elegancki i responsywny. Praktyki mogą pomóc Ci uczynić witrynę bardziej atrakcyjną, dostępną i przyjemną w przeglądaniu. Jeśli chcesz być jednym procentem najlepszych programistów CSS, posiadanie kilku asów w rękawie bardzo pomaga.