Recenzja Animatora: wtyczka animacji WordPress typu „wskaż i kliknij” (bez kodu)

Chcesz dodać przyciągające wzrok animacje przewijania i czasowe do swojej witryny WordPress?

Jeśli jesteś ekspertem od CSS, możesz samodzielnie skonfigurować te animacje. Ale dla reszty z nas WordPress nie oferuje łatwego sposobu dodawania animacji do treści.

Animator to nowa samodzielna wtyczka zespołu CSS Hero, która to zmienia, dając dostęp do prostego interfejsu typu „wskaż i kliknij”, aby skonfigurować wszystkie rodzaje animacji w witrynie WordPress, niezależnie od tego, czy używasz natywnego edytora, czy wtyczka do tworzenia stron.

Jeśli nie jesteś osobą techniczną, możesz nadal konfigurować animacje w swojej witrynie. Nawet jeśli jesteś w stanie napisać własny CSS, Animator może przyspieszyć przepływ pracy dzięki swojemu interfejsowi.

W naszej praktycznej recenzji Animatora przyjrzymy się bliżej temu, co oferuje ta wtyczka i pokażemy, jak jej używać do konfigurowania animacji WordPress.

Recenzja Animatora: Co oferuje wtyczka?

Główną zaletą programu Animator jest to, że umożliwia on dodawanie ton różnych animacji do witryny bez konieczności posiadania CSS, JS lub innej dogłębnej wiedzy technicznej.

Zamiast tego możesz zrobić wszystko, korzystając z interfejsu typu „wskaż i kliknij”, wraz z osią czasu animacji, która pomoże Ci kontrolować animacje.

Animator pochodzi z tego samego zespołu, co popularna wtyczka CSS Hero, jeśli to wiesz. Krótko mówiąc, Animator jest dla animacji tym, czym CSS Hero dla ogólnej stylizacji CSS.

Przyjrzyjmy się niektórym z największych funkcji bardziej szczegółowo.

Interfejs typu „wskaż i kliknij”.

Aby pomóc Ci zarządzać animacjami, Animator oferuje prosty interfejs typu „wskaż i kliknij”.

Istnieją dwie główne części:

1. Wizualny podgląd Twojej witryny na całej szerokości – dodając animacje, możesz natychmiast zobaczyć, jak wyglądają na podglądzie na żywo. Jest to bardzo przydatne, dzięki czemu można wprowadzać drobne poprawki bez konieczności ciągłego ponownego ładowania oddzielnego podglądu.
2. Oś czasu animacji — możesz użyć osi czasu, aby skonfigurować jedną lub więcej animacji na podstawie zachowania użytkownika podczas przewijania lub czasu. Możesz przeciągać rzeczy i dostosowywać ustawienia, aby uzyskać idealny efekt.

Otrzymasz znacznie bardziej szczegółowe spojrzenie na ten interfejs w części praktycznej… ale ogólnie jest bardzo łatwy w użyciu.

Ponad 3 zaawansowane tryby animacji z mnóstwem właściwości animacji

Aby pomóc Ci skonfigurować animacje, Animator oferuje trzy tryby wysokiego poziomu:

• Paralaksa – animacje „animowane” na podstawie procentowej pozycji elementu w rzutni. Tween to skrót od inbetween – podstawową ideą jest to, że pozwala tworzyć efekty przewijania paralaksy.
• Przewiń – uruchom określone style CSS lub animacje po przewinięciu przez użytkownika określonej liczby pikseli. Na przykład możesz zastosować style specyficzne dla stanu do nagłówka, gdy użytkownik przewinie stronę w dół.
• Timed – twórz animacje oparte na czasie, które występują zgodnie z ustalonym harmonogramem. Na przykład dodanie pływającej animacji do elementu, aby wyskoczył.

Oto kilka ogólnych przykładów z programu Animator, które pokazują różne tryby animacji:

Oprócz trybów animacji wysokiego poziomu masz również możliwość animowania ogromnej liczby właściwości CSS, w tym:

• Kolor tła
• Pozycja w tle
• Cień pudełka
• Rozmiar czcionki
• Odstępy między literami
• Nieprzezroczystość
• Perspektywiczny
• Obróć X, Y lub Z
• Skala
• Pochyl X lub Y
• Szerokość
• …dużo więcej

Aby uprościć sprawę, Animator zawiera ustawienia wstępne dla wielu z nich:

Masz jednak również możliwość stworzenia własnej animacji, która w razie potrzeby pozwala wyjść poza te ustawienia wstępne.

Współpracuje z natywnym edytorem, motywami i programami budującymi strony

Oprócz pracy z natywnym edytorem WordPress, Animator współpracuje również z motywami innych firm i wtyczkami do tworzenia stron.

Obejmuje to między innymi następujące narzędzia:

• Elementor
• Konstruktor bobrów
• Divi
• Kreator stron WPBakery
• Avada
• Astra
• Tlen

Zasadniczo Animator powinien działać na każdym elemencie Twojej witryny, niezależnie od tego, skąd ten element pochodzi.

Na przykład, może lubisz projekt Beaver Builder, ale czujesz, że opcje animacji Beaver Builder są zbyt ograniczone dla twoich potrzeb.

Instalując Animator wraz z Beaver Builder, zyskasz możliwość dodawania bardziej zaawansowanych animacji do swoich projektów Beaver Builder.

Ręcznie edytuj lub eksportuj animacje (dla bardziej zaawansowanych użytkowników)

Podczas gdy Animator jest zbudowany w taki sposób, aby użytkownicy nietechniczni mogli tworzyć animacje za pomocą interfejsu „wskaż i kliknij”, bardziej zaawansowani użytkownicy mogą docenić fakt, że Animator nadal zapewnia dostęp do podstawowego kodu, jeśli chcesz bezpośrednio wprowadzać zmiany.

W razie potrzeby możesz także wyeksportować dane aplikacji.

Całkowicie samodzielna wtyczka

Chociaż Animator pochodzi od zespołu CSS Hero, nie musisz mieć zainstalowanego CSS Hero, aby korzystać z Animatora.

Oznacza to, że Animator jest całkowicie samodzielną wtyczką.

Biorąc to pod uwagę, Animator nadal będzie dobrze działał z CSS Hero, więc możesz całkowicie swobodnie korzystać z obu, jeśli chcesz kontrolować styl swojej witryny bez kodu.

Jak tworzyć animacje WordPress za pomocą wtyczki Animator

Teraz, gdy już wiesz, co oferuje Animator, przyjrzyjmy się, jak to jest faktycznie używać Animatora w Twojej witrynie.

Poniżej pokażę krok po kroku, jak skonfigurować animacje WordPress za pomocą Animatora i strony demonstracyjnej, którą stworzyłem z motywem Astra i natywnym edytorem WordPress.

1. Otwórz interfejs animatora na stronie, którą chcesz animować

Aby rozpocząć, otwórz interfejs programu Animator na stronie zawierającej treści, które chcesz animować.

Jeśli chcesz animować element całej witryny ( np. nagłówek ), możesz po prostu otworzyć dowolną stronę zawierającą nagłówek. Wszelkie skonfigurowane animacje zostaną automatycznie zastosowane do wszystkich wystąpień tego nagłówka.

Aby uruchomić interfejs Animator, wystarczy kliknąć opcję Hero Animator na pasku narzędzi WordPress podczas przeglądania odpowiedniej strony.

2. Wybierz element, który chcesz animować

Po otwarciu interfejsu Animator powinieneś zobaczyć wizualny podgląd swojej strony wraz z interfejsem Animator na dole.

Aby rozpocząć, wybierz element do animacji, klikając go w podglądzie na żywo.

Gdy najedziesz kursorem na podgląd na żywo, Animator wyświetli dodatkowe informacje o każdym elemencie, co pomoże Ci wybrać właściwy.

Na przykład, aby animować obraz w moim projekcie testowym, wystarczy go wybrać:

Możesz także ręcznie wprowadzić klasę lub identyfikator CSS, co może być konieczne w przypadku niektórych obrazów tła.

Na przykład starałem się użyć podejścia „wskaż i kliknij”, aby wybrać obraz bohatera na mojej stronie testowej. Wydaje się, że jest to związane z tym, jak witryna demonstracyjna Astry ustawiła obraz jako tło kontenera w swoim specjalnym bloku kontenera, ponieważ nie miałem problemów z używaniem wskaż i kliknij, aby wybrać inny obraz.

3. Wybierz swój tryb animacji

Po wybraniu elementu do animacji chcesz wybrać tryb animacji za pomocą pola Względny do .

Ponownie masz trzy opcje:

1. Wysokość rzutni (inaczej paralaksa)
2. Przewijane piksele
3. Czas

Zasadniczo składasz oświadczenie deklaratywne – np. „Chcę animować [ten element] względem [tego trybu animacji]”.

W tym przykładzie ustawiłem to tak, że animuję obraz mojej witryny względem zapętlonego timera.

Uwaga – do jednego elementu można dodać wiele typów animacji. Na przykład można dodać zarówno animację opartą na czasie, jak i animację paralaksy (wysokość rzutni).

4. Skonfiguruj swoją animację za pomocą osi czasu

Teraz, gdy już wybrałeś, co chcesz animować, możesz właściwie skonfigurować animację za pomocą osi czasu.

Aby to zrobić, kliknij ikonę plusa , aby dodać animację :

Spowoduje to otwarcie wyskakującego okienka zawierającego różne typy animacji, których można używać w tym trybie animacji.

Na przykład w przypadku animacji opartej na czasie niektóre z gotowych opcji obejmują:

• Odbić się
• Spadający
• Platforma
• Rozmycie liter
• Duży namiot
• Puls cienia
• Skróć skok
• Proste wirowanie

Możesz zobaczyć animowane podglądy tego, jak może wyglądać ta animacja, co jest naprawdę miłe przy wyborze odpowiedniej animacji.

Jeśli chcesz wykonać inny typ animacji, którego nie ma na liście gotowych ustawień, możesz także utworzyć własny typ animacji.

Gdy wybierzesz animację, pojawi się ona na osi czasu. Animacja zostanie również zastosowana do podglądu na żywo, dzięki czemu możesz dokładnie zobaczyć, jak będzie wyglądać na Twojej stronie.

W przypadku animacji opartej na czasie zobaczysz linię przesuwającą się po pasku osi czasu po zakończeniu animacji, co jest bardzo przydatne.

Jeśli chcesz wydłużyć lub skrócić animację, możesz po prostu przeciągnąć pasek na osi czasu.

Możesz także kliknąć ikonę z trzema kropkami , aby uzyskać dostęp do bardziej zaawansowanych ustawień, takich jak zapętlenie animacji (a jeśli tak, to na jak długo).

Jeśli chcesz dodać wiele animacji, możesz powtórzyć kroki, aby dodać inną animację.

Następnie możesz ułożyć te animacje na osi czasu, aby osiągnąć pożądany efekt.

Pamiętaj, aby wyłączyć nieskończone pętle, jeśli chcesz używać wielu animacji opartych na czasie.

Nie jesteś też ograniczony do tworzenia tego samego typu animacji. Na przykład technicznie można dodać animacje czasu i przewijania do tego samego elementu.

W przypadku elementów przewijanych paralaksą Animator umożliwia również sterowanie LERP (interpolacją liniową) w celu wygładzenia zachowania przewijania elementu.

Aby to dostosować, możesz użyć listy rozwijanej Lerp po lewej stronie interfejsu.

5. Opublikuj swoje animacje

Gdy jesteś zadowolony ze swoich animacji, wystarczy, że klikniesz przycisk Zapisz , aby opublikować je w swojej witrynie.

Dostępna jest również przydatna opcja, która pozwala zdecydować, czy publikować animacje w mobilnej wersji witryny.

Odkrywanie innych trybów animacji

Różne tryby animacji będą miały nieco inne interfejsy na osi czasu.

Na przykład, jeśli wybierzesz animację wysokości rzutni, oś czasu zmieni się z sekund na względną procentową wysokość rzutni.

Na przykład możesz zobaczyć, że zaczyna się od 150% i sięga aż do -50%.

Jeśli animujesz coś takiego jak kolor tła, możesz wybrać różne kolory na podstawie względnej głębokości przewijania:

W przypadku animacji Przewijane piksele zobaczysz konkretne liczby pikseli zamiast względnych wartości procentowych.

Na przykład, jeśli ustawisz krok animacji na 600 pikseli, animacja nastąpi, gdy użytkownik przewinie dokładnie 600 pikseli.

Jak bezpośrednio edytować, eksportować lub manipulować kodem

Bardziej zaawansowanym użytkownikom Animator umożliwia również wyświetlanie nieprzetworzonych danych JSON animacji. Możesz użyć tego do ponownej edycji animacji lub skopiować/wkleić do pliku tekstowego, aby uzyskać pełną migawkę bieżących animacji.

Dostępny jest również panel Operacje , przeznaczony dla bardziej technicznych użytkowników, który pozwala programowo manipulować obiektem danych JSON wtyczki, dodając własny kod javascript. Nie jestem programistą, więc nie jestem do końca pewien, jakie daje to możliwości, ale wyobrażam sobie, że programiści docenią ten poziom kontroli.

Dostęp do tych opcji można uzyskać, klikając ikonę trzech kropek obok przycisku Zapisz i wybierając opcję Eksportuj dane .

Ceny animatorów

Animator jest dostępny tylko w wersji premium, ale jest przystępny cenowo za to, co oferuje.

W normalnej cenie będzie Cię to kosztować 49 USD za korzystanie z nieograniczonej liczby witryn oraz rok wsparcia i aktualizacji.

Jednak, aby uczcić jego uruchomienie, cena wtyczki wynosi obecnie zaledwie 29 USD w czasie, gdy piszemy naszą recenzję wtyczki Animator.

Jeśli kupisz go za tę cenę 29 USD, możesz zablokować tę cenę na odnowienie, jeśli chcesz nadal otrzymywać wsparcie i aktualizacje po pierwszym roku.

Jeśli chcesz przetestować wtyczkę przed dokonaniem zakupu, Animator umożliwia uruchomienie w pełni działającej wersji demonstracyjnej interfejsu animacji. Możesz uzyskać do niego dostęp na tej stronie lub klikając przycisk Wypróbuj demo na stronie głównej programu Animator.

Istnieje również 30-dniowa gwarancja zwrotu pieniędzy, więc możesz przetestować ją na własnych stronach bez ryzyka dla swojego portfela.

Ostatnie przemyślenia na temat Animatora

Ogólnie rzecz biorąc, Animator spełnia obietnicę oferowania łatwych animacji typu „wskaż i kliknij”.

Z pewnością nie jestem programistą, ale udało mi się bardzo szybko rozpocząć pracę.

Interfejs oparty na osi czasu ułatwia porządkowanie animacji i zarządzanie ich ustawieniami. Bardzo pomocne jest również natychmiastowe zobaczenie, jak te animacje wyglądają na podglądzie wizualnym, bez konieczności odświeżania strony.

Chociaż Animator jest wystarczająco prosty dla użytkowników nietechnicznych, myślę, że zaawansowani użytkownicy mogą nadal czerpać korzyści tylko dlatego, że może przyspieszyć działanie. Więc nawet jeśli jesteś w stanie napisać własny CSS, nadal możesz preferować używanie Animatora, aby zaoszczędzić czas.

Jeśli chcesz sam wypróbować Animatora, możesz użyć poniższych przycisków, aby rozpocząć: