CSS Hero Animation dla WordPress – tak możesz dodać animacje do swojego bloga

Choć często korzystamy z gotowych motywów, to z taką samą częstotliwością staramy je zmodyfikować tak, by spełniały nasze wymagania. Sprostać tym potrzebom ma nowa wtyczka do WordPressa, która pozwala na wprowadzenie animowanych elementów.

Animacje mogą wnieść dynamikę w statyczne strony internetowe. Mają one wpływ na nastrój panujący na stronie – w zależności od potrzeb może być zabawny, tajemniczy, przerażający itd. Dobre animacje wpływają na poziom zaangażowania użytkownika. Dzięki nowej wtyczce do WordPressa – CSS Hero Animator, możesz dodać animowane elementy do Twojej strony, nie zaprzątając sobie głowy kodowaniem.

Czemu właśnie CSS Hero Animator?

Główne zalety są dwie. Po pierwsze jest darmowy. Wystarczy pobrać plik ze strony csshero.org i zainstalować go, tak jak wszystkie inne wtyczki do WordPressa.

Po drugie jest prosty i intuicyjny. Działa na zasadzie „point and click”, dzięki czemu nawet bez znajomości zasad kodowania, możesz stworzyć animacje dla swojej strony.

By korzystać z Animatora nie musisz posiadać wtyczki CSS Hero, która pozwala na zarządzanie kolorami, czcionką, wielkością, grubością itd. Są od siebie niezależne, jednak stosowane wspólnie mogą dać dużo lepszy efekt.

Możliwości CSS Hero Animator

By dodać animacje do wybranego obiektu wystarczy najechać na niego kursorem i kliknąć. Wtedy pojawi się pasek z  listą animacji. W zależności od charakteru Twojej marki i odbiorców możesz wybrać bardziej wyraziste lub subtelne efekty.

Offset

Ta funkcja pozwala na ustalenie czasu. po którym animacja się pojawi. Gdy wybierzesz opcję positive offset, na ekranie użytkownika pojawi się animacja automatycznie się odtwarzająca. Natomiast Negative offset pozwoli Ci na wyróżnienie pewnych elementów, np. by przyciągnąć uwagę do przycisku call to action, możesz wprowadzić go za pomocą animacji zaraz po tym jak strona się załaduje. Jednakże w przypadku większych elementów opcja ta może się nie sprawdzić – pozostawia zbyt dużo pustej przestrzeni na stronie zanim animacja się pojawi. Sposób pojawiania się animacji możesz także dostosowywać indywidualnie. Jeśli chcesz, by zaczęły pojawiać się po tym jak użytkownik przeskroluje 300px, wystarczy wybrać taką opcję w ustawieniach.

Szybkość animacji

Możesz wybrać je z 4 proponowanych opcji: normalna i 3 tempa wolnego pojawiania się. By dobrać odpowiednią, najlepiej poeksperymentować z różnymi możliwościami. Np. duże elementy mogą pojawiać się wolniej niż małe. Połączenie różnych szybkości animacji może dać naprawdę ciekawy efekt. Animacje nie powinny być zbyt wolne, bo okażą się zbyt nudne dla odbiorców, zwłaszcza w przypadku tych, które są często używane.

Telefony komórkowe

O ile animacje CSS wyglądają dobrze i szybko ładują się na nowoczesnych urządzeniach mobilnych, o tyle może okazać się, że w przypadku Twojej strony animacje na smartfonach zdecydowanie się nie sprawdzają. W tym wypadku wystarczy zaznaczyć opcję disable on mobile phone.

Run Once

Ta opcja pozwoli Ci zdecydować czy animacja będzie pojawiać się tylko raz lub kilkakrotnie w zależności od ruchów użytkownika na stronie. Nie można jednak zapominać, że nawet najdelikatniejsza animacja zaczyna być irytująca gdy widzisz ją setny raz.

Jak pokazuje poniższe wideo, stosowanie nowej wtyczki rzeczywiście jest proste i intuicyjne.

Więcej informacji o wtyczce znajdziecie w tym miejscu.