Współczesny internauta chce czegoś, co przyciągnie jej wzrok. Ale przy tak wielu fajnych stronach i rozrywkach w Internecie, coraz trudniej jest przyciągnąć ich uwagę. Co ma zrobić web-developer?!

Animacja może pomóc. Ale nie byle jaką starą, losową animację. To irytujące. Mówię o animacji, która działa. Animacja, która sprawia, że Twoja witryna jest pop bez denerwowania czytelników i spowalniania witryny. Mówię o animowaniu za pomocą CSS.

Animacje CSS umożliwiają przejście z jednego stylu CSS do drugiego. Sprawiają, że Twoje przyciski obracają się i obracają. Mogą przełączać stan przycisku lub przełącznika. Mogą pokazać podpowiedź. Sprawiają, że Twoje strony przechodzą w płynny i interesujący sposób (a może dziki i szalony sposób, jeśli taki masz gust). Może przesuwać obiekt po ekranie. Animacje CSS wyglądają świetnie i nowocześnie i są łatwe do wdrożenia.

Dlaczego CSS zamiast JavaScript?

Po co używać CSS, skoro można użyć JavaScript lub kilku innych skryptów do tworzenia animacji?Oto kilka dobrych powodów:

Oto kilka dobrych powodów:

  1. Są łatwe. Nie musisz znać się na skryptach, aby je utworzyć.
  2. Są gładkie nawet przy umiarkowanym obciążeniu systemu. Będą działać płynnie, gdy JavaScript nie będzie.
  3. Przeglądarka steruje sekwencją animacji. Oznacza to, że karty przeglądarki, które nie są obecnie widoczne, zmniejszą liczbę uruchomionych animacji, znacznie zwiększając wydajność.

Zasadniczo animowanie za pomocą CSS jest najprostszym sposobem na przeniesienie czegoś na ekran i dodanie animowanego flary do witryny.

Twórz wspaniałe animacje CSS za pomocą Upfront, naszej łatwej w użyciu platformy motywów przeciągnij i upuść.

Jak ręcznie tworzyć animacje CSS

Istnieje kilka sposobów tworzenia animacji CSS. Jednym ze sposobów jest ich ręczne kodowanie przy użyciu API @ keyframes.

Uwaga: klatki kluczowe to stary termin z czasów ręcznie rysowanej animacji. Animatorzy tworzyli klatki akcji zwane klatkami kluczowymi. Klatki kluczowe były głównymi klatkami akcji. Następnie animatorzy rysowali poszczególne klatki przechodzące między kluczowymi klatkami, wypełniając luki.

Animacja

Podobnie jak stare kreskówki, animacja jest definiowana za pomocą klatek kluczowych. Dzięki animacjom CSS, w przeciwieństwie do starych kreskówek, które zostały narysowane ręcznie, mówimy przeglądarce, jakie wartości właściwości CSS muszą mieć w określonych punktach, a przeglądarka wypełni luki. Waltowi by się to spodobało!

Klatka kluczowa CSS to lista wartości opisujących animację. Jest to blok zapisany w pliku CSS. Wszystko, co ma nawiasy klamrowe, jest częścią bloku @ keyframes. Słowa kluczowe takie jak od oraz na określ, co zrobi animacja. Przykładem może być przesunięcie znaku z jego aktualnej pozycji na ekranie do określonej liczby pikseli od tej pozycji. Możesz użyć polecenia translate aby przesunąć obiekt. Wykorzystuje to przyspieszenie sprzętowe i zmniejsza ryzyko nadpisania istniejących stylów.

Spójrzmy na kilka przykładów.

Przejścia

Przejścia pozwalają przenieść obiekt z punktu A do punktu B bez żadnych punktów pomiędzy nimi.

Oto przykładowy kod od programistów Google:

Ładowanie gist 9b179c7d643ac14ca229fb28f1a3b269

Używa przejścia CSS, który jest ustawiony na 500ms i przeniesie element 100px zarówno w osi X, jak i Y.

Animacje CSS są zwykle poprzedzone przez dostawcę. Przedrostek – webkit– jest używany dla przeglądarek takich jak Chrome, Safari, Safari Mobile, Android i Opera. Firefox i Internet Explorer nie mają prefiksów. Możesz użyć jednego z wielu dostępnych narzędzi i przewodników, aby utworzyć wersje, które działają specjalnie w tych przeglądarkach.

Możesz użyć JaveScript, aby włączyć lub wyłączyć animację:

Ładowanie gist 40553fa383049e0e429a7046b2edc3b2

Kod zakończenia animacji wyglądałby następująco:

Ładowanie gist cde0f1fd82377e125db4ecd3a6cf427d

Animacje

Animacje CSS zapewniają większą kontrolę nad przejściami, wykorzystując wiele klatek kluczowych, czasów trwania i iteracji.

Ten kod od Google animuje pole bez interakcji użytkownika, z nieskończonymi powtórzeniami i zmienia wiele właściwości w tym samym czasie:

Ładowanie gist c8622a1acb3023d21cf11a113ea7568f

Animację zdefiniowano oddzielnie od elementu docelowego. Właściwość animation-name służy do wyboru żądanej animacji. Jest to o wiele prostsze niż używanie JavaScript do wykonywania tej samej pracy.

Możesz użyć JavaScript do zarządzania stanem, ustawić klasy na elementach docelowych i pozwolić przeglądarce obsługiwać animacje. Tworzy to prostą i płynną metodę tworzenia i kontrolowania animacji na swojej stronie internetowej bez konieczności robienia Tony kodu i nie będzie nadmiernie obciążać serwera, ponieważ CSS jest lekki.

Przemyślenia na temat ręcznego kodowania

Animacje CSS @Keyframe są doskonałym dodatkiem do zestawu narzędzi programisty. Są prostsze niż animacje JavaScript i mogą wykonywać bardziej szczegółowe animacje niż przejścia CSS. Nadal możesz go używać z JavaScript, jeśli chcesz użyć JS do wykonywania niektórych z bardziej podatnych funkcji.

Mimo to animacje przy użyciu interfejsu API @Keyframe mogą być złożone i mogą zająć trochę czasu, aby działały tak, jak chcesz. Możesz mieć tyle klatek kluczowych, ile chcesz, ale staje się to czasochłonne. Kodowanie animacji CSS może stać się dość zaawansowane i wymaga dogłębnej znajomości CSS, a nawet pewnej znajomości HTML i JavaScript.

Korzystanie z narzędzi do tworzenia animacji CSS

Ręczne kodowanie może być trudne i czasochłonne. Aby w tym pomóc, dostępnych jest kilka dobrych narzędzi. Narzędzia te mogą pomóc w tworzeniu skomplikowanych ruchów i animacji za pomocą kodu. Określasz efekty, czas i kąty, które chcesz, a otrzymasz kod, który możesz wkleić do witryny. Możesz go nawet modyfikować w dowolny sposób.

Rzućmy okiem na kilka dobrych narzędzi. 

  • Stylie

    Stylie to darmowe narzędzie Jeremy Kahn, które pozwala łatwo skonfigurować klatki kluczowe, ruch, CSS i HTML oraz tworzyć własne animacje CSS bez konieczności ręcznego pisania kodu. Jest to graficzna aplikacja internetowa typu open-source, która jest potężna i łatwa w użyciu.

    Wykorzystuje fakt, że @keyframes może mieć dowolną liczbę klatek kluczowych w animacji, aby tworzyć skomplikowane ścieżki ruchu. Jest to znane jako krzywej luzowania. Możesz stworzyć dowolną krzywą. Wykonanie tego ręcznie zajęłoby godziny, ale w przypadku Stylie zajmuje to tylko kilka minut.

    Jest prosty w użyciu. Ustawiasz czas klatek kluczowych i zaczynasz rysować ścieżkę, którą ma przyjąć obiekt. Możesz mieć tyle klatek kluczowych i ścieżek, ile chcesz. Po zakończeniu możesz go zapisać lub wybrać Eksportuj, wybierz CSS i skopiuj kod.

    Stworzyłem ścieżkę w kilka sekund. Piłka podąża ścieżką z prędkością, którą ustawiłem dla każdej klatki kluczowej. Oznacza to, że każda linia na ścieżce może mieć inną prędkość. Wygenerował dla mnie całkiem spory kawałek kodu. Ten kod można tworzyć ręcznie, ale naprawdę, dlaczego chcesz?  Nieźle jak na darmowe narzędzie. Łatwo zrozumieć, dlaczego takie narzędzie jest pomocne w przypadku złożonych animacji i ścieżek.

    Możesz również wrócić i zmodyfikować kod, jeśli go zapisałeś. Jeśli chcesz dokonać modyfikacji kodu, który Ci daje, nie musisz zaczynać od zera, ponieważ złożony kod jest już wygenerowany dla ciebie. Autor zapewnia miły samouczek, który pomoże Ci w tworzeniu fantazyjnych kątów.

    Interesuje Cię Stylie?

    Szczegóły
  • Animować.css

    Ten jest aplikacja od Daniel Eden, który jest darmowy. Posiada 75 animacji do wyboru. Możesz pobrać aplikację ze strony lub z GitHub. Możesz zobaczyć animacje na samej stronie. Po wybraniu animacji lub naciśnięciu przycisku logo wykona animację, dzięki czemu będziesz wiedział, co otrzymujesz. Efekty obejmują odbicie, błysk, impuls, gumka, wstrząsnąć, huśtawka, tada, wobble, jello, obracać, flip, slide, zoom, zawias, i więcej.

    Aby go użyć, umieść arkusz stylów w pliku nagłówka dokumentu, Dodaj klasę animowane do elementu, który chcesz animować, i Dodaj klasę, którą chcesz z 75 opcji. Możesz również dołączyć klasę infinite dla nieskończonej pętli.

    Oto przykład ze strony GitHub:

    < / pre>
    < h1 class="animated infinite bounce">przykład < / H1>
    < pre>
    

    To wszystko, czego potrzebujesz, żeby to zadziałało. Możesz zrobić z nim więcej, łącząc go z JQuery lub dodając własne reguły CSS.

    Zainteresowany Animate.css?

    Szczegóły
  • Animatable

    Ten ma jedne z najciekawszych efektów, które obejmują zarysowanie, kolory, szerokość, krycie, wysokość, Cień, obramowanie, rozmiar czcionki, promień, wcięcie, odstępy, padding i wiele innych. Do wyboru jest 39 efektów. Aby ich użyć, wystarczy dołączyć arkusz stylów, dodać klasę do elementu, który chcesz animować, i określić, których animacji użyć.

    Zainteresowany Animatable?

    Szczegóły
  • Effeckt.css

    Ten robi modalne, modalne pozycje, przyciski, elementy listy, elementy przewijania, przejścia, nawigację na ekranie, podpisy, wskazówki narzędziowe, elementy formularzy i karty ze wszystkimi efektami, których oczekujesz dla każdego. To wciąż jest w toku. Podobnie jak inne biblioteki, aby z nich korzystać, dołączasz arkusz stylów, dodajesz klasę do elementu, który chcesz animować, i określasz, których animacji użyć.

    Zainteresowany Effeckt.css?

    Szczegóły
  • Magia.css

    Ten robi otwieranie, huśtanie, znikanie, skręcanie, perspektywę, obracanie, przesuwanie i wiele innych. Ma w sumie 65 efektów. Jest to kolejna Biblioteka, w której zawiera się arkusz stylów, dodaje klasę do elementu, który ma być animowany, i określa, których animacji użyć.

    Interesuje się magią.css?

    Szczegóły
  • Morf.js

    Ten ma natywne i niestandardowe funkcje dla webkit. Pozwala wypróbować je i zapewnia CSS, który można skopiować i wkleić do kodu. Proste i całkowicie sprytne.

    Zainteresowany Morf.js?

    Szczegóły
  • Przejścia Stron

    Ten ma mnóstwo płynnych przejść, które wyglądają niesamowicie. Są one używane podobnie jak inne biblioteki, w których dołącza się arkusz stylów, dodaje klasę do elementu, który ma być animowany, i określa, których animacji użyć. Ale jeśli wybaczysz ten kalambur, ten naprawdę ma jakiś styl.

    Interesują Cię przejścia stron?

    Szczegóły
  • Ceaser

    To bezpłatne narzędzie online daje fragmenty kodu z ustawień, które wybierzesz. Przesuwa obiekt od lewej do prawej i z powrotem, dostosowuje jego szerokość, wysokość i krycie. Możesz dostosować czas trwania i wybrać między kilkoma różnymi typami wyrównania lub utworzyć własne. Moim zdaniem warto to sprawdzić.

    Zainteresowany Ceaser?

    Szczegóły

Używanie wtyczek do tworzenia animacji CSS

Dostępnych jest kilka dobrych wtyczek, które wykonują określone zadania, takie jak przejścia strony lub animacje przycisków. Nie wymagają one obsługi żadnego kodu. Nadal możesz określić czas, czas trwania itp.

Oto krótkie spojrzenie na kilka, które lubię.

  • Animuj To!

    Ta darmowa wtyczka zapewnia łatwy sposób dodawania animacji CSS do stron, postów i widżetów. Posiada 50 animacji wejścia, wyjścia i poszukiwacza uwagi. Może animować przewijanie z innym przesunięciem przewijania dla każdego bloku animacji. Może również animować po najechaniu kursorem i kliknięciu. Posiada również specjalne klasy opóźnień do tworzenia sekwencji animacji na stronach i postach. Animacje można wyłączyć na urządzeniach mobilnych, jeśli użytkownik chce. Użytkownicy mogą nawet stosować animacje do widżetów.

    Byłem pod wrażeniem tego, jak łatwa jest ta wtyczka w użyciu. Dodaje przycisk w edytorze wizualnym, w którym dokonujesz wszystkich wyborów. Automatycznie umieszcza zawartość w opakowaniu. Wszystko wewnątrz opakowania–tekst, grafika itp. – jest animowane. Możesz łatwo wprowadzać zmiany w kodzie, ponieważ jest dobrze oznaczony. Wtyczka jest lekka, więc nie obciąża twojego serwera i jest wystarczająco dużo możliwości, aby Twoje animacje były świeże i ekscytujące.

    Zainteresowany Animate It!?

    Szczegóły
  • WP Parallax Content Slider

    Ta darmowa wtyczka automatycznie dodaje suwak treści ostatnich postów w dowolnym miejscu. Możesz wybrać typ zawartości do wyświetlenia, liczbę slajdów, ustawić tryb automatycznego odtwarzania, czas między slajdami, kolejność sortowania i wiele innych. Możesz również wybrać motyw graficzny pomiędzy żółtymi falami, ciemnymi, czerwonymi retro i srebrnymi. Można go również używać do wyświetlania zawartości HTML.

    Ma tylko sześć ustawień, więc jest łatwy w użyciu i można go używać na dwa sposoby. Możesz użyć krótkiego kodu, aby umieścić suwak na stronie lub poście, lub możesz wkleić dostarczony kod do lokalizacji, w której suwak ma się pojawić w Twoim motywie.

    Interesuje Cię WP Parallax Content Slider?

    Szczegóły
  • Wszystko w jednym przycisku: Generator animowanych przycisków CSS3 dla WordPress

    Ta darmowa wtyczka umożliwia tworzenie animowanych przycisków CSS3 z edytora wizualnego. Możesz dostosować wyrównanie, rozmiar, kolor, ikonę, animację i inne elementy, a następnie umieścić je na swoich stronach i postach za pomocą skrótów. Umieszcza przycisk w edytorze wizualnym, dzięki czemu można utworzyć przycisk w locie, aby umieścić go w treści.

    Przycisk w edytorze wizualnym otwiera okno, w którym można utworzyć nowy przycisk z animacjami, tekstem i adresem URL. Wystarczy dokonać wyboru, a następnie kliknąć, aby utworzyć przycisk. Następnie umieszcza krótki kod na stronie lub poście. Jeśli chcesz wprowadzić zmiany, możesz zmodyfikować kod w treści.

    Interesuje wszystko w jednym przycisku: Generator animowanych przycisków CSS3 dla WordPress?

    Szczegóły
  • Przejście Strony

    Ta darmowa wtyczka wykorzystuje animację CSS3, aby zapewnić płynne przejście między stronami, nadając witrynie bardziej nowoczesny wygląd. Istnieje wiele fajnych efektów, w tym zanikanie (wyśrodkowane, w górę, w dół, w lewo, w prawo), obracanie, odwracanie i powiększanie. Możesz dostosować kierunek i czas.

    Korzysta z prostego ekranu konfiguracji, na którym można wybrać rodzaj animacji, czas trwania i kolor. Możesz pokazać słowo “Ładowanie”, jeśli chcesz. Jeśli go pokażesz, możesz wybrać dowolny kolor czcionki. Możesz również wykluczyć stronę, jeśli chcesz, dodając “brak animacji “do tagu” a ” tego linku.

    Jak sama nazwa wskazuje, animuje tylko przejście z jednej strony na drugą, ale jest prosty w konfiguracji, wygląda świetnie i działa jak urok. Fajnie jest też oglądać go w akcji.

    Zainteresowany przejściem strony?

    Szczegóły
  • Animacje I Przejścia Strony

    Jest to kolejna darmowa wtyczka, która robi animacje CSS3 dla przejść strony. Wykona animacje dla strony i strony, a Ty możesz ustawić czas trwania dla każdego. Będzie zanikać (wyśrodkowany, w górę, w dół, w lewo, w prawo), obracać, odwracać (x i y) i powiększać zarówno dla wejścia, jak i wyjścia.

    Konfiguracja jest bardzo prosta. Dokonaj kilku wyborów i gotowe. Jest wystarczająco dużo animacji, aby nadać witrynie nowoczesny wygląd bez dużo pracy.

    Interesują Cię animacje i przejścia stron?

    Szczegóły
  • Animacja CSS3 efekty Wtyczka WordPress

    Ten twierdzi, że jest najbardziej kompletną wtyczką do animacji CSS na rynku. Ma ponad 60 efektów animacji, które obejmują zanikanie, przesuwanie, obracanie, odwracanie, odbijanie, gumkę, chwiejenie, wstrząsanie, huśtanie, tada, błysk, zawias i wiele innych. Ma sześć różnych ustawień, które kontrolują czas trwania, opóźnienie i prędkość. Ma wyzwalacze zdarzeń, które obejmują Ładowanie, kliknięcie i najechanie myszką. Istnieje również wiele typów wyzwalaczy, więc wyzwalaczem może być zawartość, taka jak obraz, przycisk, tekst lub łącze.

    Dodaje przycisk do edytora wizualnego, dzięki czemu można go dodać do treści na dowolnej stronie lub poście. Możesz nawet wyświetlić podgląd animacji, aby wiedzieć, czy jest to, czego szukasz.

    Jest to wtyczka premium. Zwykła licencja kosztuje 15 USD za użytkowanie przez Ciebie lub jednego klienta w jednym produkcie końcowym, za który użytkownicy końcowi nie są obciążani opłatą. Rozszerzona licencja wynosi 75 USD do użytku przez Ciebie lub jednego klienta, w jednym produkcie końcowym, który użytkownicy końcowi can zostać obciążony.

    Interesuje Cię Animacja CSS3 efekty wtyczki WordPress?

    Szczegóły

Wrapping Up

Animacje CSS sprawiają, że witryna błyszczy i jest łatwa do wdrożenia, niezależnie od tego, czy kodujesz ręcznie, używasz narzędzi do tworzenia kodu dla Ciebie, czy używasz wtyczki.

Czy próbowałeś animacji CSS na swojej stronie WordPress? Czy korzystałeś z jednego z tych narzędzi lub wtyczek? Masz coś do dodania? Opowiedz nam o swoich doświadczeniach w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…