Nieskończona animacja w Elementorze jest świetnym sposobem na dodanie interaktywnego elementu do swojej strony internetowej opartej na WordPress. Takie animacje przyciągają uwagę użytkowników i sprawiają, że strona staje się bardziej interesująca. Na przykład, możesz dodać nieskończoną animację do przycisku do kontaktu, aby zachęcić odwiedzających do interakcji. Co więcej, korzystając z Elementora, możesz łatwo dostosowywać te animacje, aby idealnie pasowały do stylu Twojej strony. Jeśli chcesz dowiedzieć się, jak dodać nieskończoną animację w Elementorze za pomocą kodu CSS, wykorzystaj nasz poradnik online. Krok po kroku pokazujemy, jak to zrobić.
O jaki typ animacji chodzi?
O jakim typie animacji mówimy? Jeśli zajmujesz się tworzeniem strony internetowej przy użyciu WordPressa i Elementora, to prawdopodobnie wiesz o dodawaniu animacji do Twojej witryny. Dzięki animacjom, czyli efektom ruchu, możesz sprawić, że Twoja strona stanie się bardziej dynamiczna i atrakcyjna dla użytkowników. Możemy podzielić animacje na „Scrolling Effect” (efekt przy skrolowaniu strony), „Mouse Effects” (efekt przy ruchu kursorem myszy) oraz animację wejścia, czyli efekt, który pojawia się, gdy element jest widoczny na ekranie. Zobaczysz to na krótkim wideo obok. Na tym wideo widać zastosowanie jednej z animacji. W tym poradniku skoncentrujemy się na omówieniu tego ostatniego rodzaju animacji, czyli efektu wejścia.
Zapętlona animacja w Elementorze
Zapętlona animacja w Elementorze może dodać dodatkowego efektu i dynamiki do Twojej strony internetowej. W naszym przykładzie postanowiliśmy skupić się na animacji ruchu, która przyciąga uwagę użytkowników. Funkcja zapętlonej animacji pozwala na powtarzanie wybranej animacji w nieskończoność. Aby to osiągnąć, wybrana animacja musi należeć do kategorii „Attention Seekers„. Wtedy najlepiej się prezentuje w pętli. My wybraliśmy animację „Pulse„, która delikatnie pulsuje, przyciągając uwagę odwiedzających. Za pomocą dodatkowego kodu CSS (custom CSS w Elementor Pro) możemy uzyskać efekt animacji w pętli:
Za pomocą dodatkowego kodu CSS (custom CSS w Elementor Pro) możemy uzyskać efekt animacji w pętli:
selector{
animation-iteration-count: infinite;
}
Jeśli nie dysponujesz płatną wersją tego buildera stron to dodaj do elementu własną klasę lub ID. Następnie, dodaj własny CSS do strony (np. poprzez „Wygląd” -> „Dostosuj”), jeśli Twój motyw obsługuje tą opcję:
#ID-elementu{
animation-iteration-count: infinite;
}
Lista dostępnych efektów
Oto lista wszystkich animacji wejścia z Elementora, które należą do kategorii „Attention Seekers”:
- Bounce: Element wykonuje efekt odbicia, przyciągając uwagę użytkownika,
- Flash: Element szybko błyszczy, przyciągając uwagę użytkownika,
- Pulse: Element wykonuje pulsujący efekt, co przyciąga uwagę użytkownika,
- Rubber Band: Element „rozciąga się” i „skurcza”, przyciągając uwagę użytkownika,
- Shake: Element drga lub trzęsie się, przyciągając uwagę użytkownika,
- Head Shake: Głowa elementu wykonuje drgania, przyciągając uwagę użytkownika,
- Swing: Element przechyla się w lewo i prawo, przyciągając uwagę użytkownika,
- Tada: Element wykonuje efektowną animację „tada”, przyciągając uwagę użytkownika,
- Wobble: Element delikatnie „chwieje się”, przyciągając uwagę użytkownika,
- Jello: Element „skacze” w sposób przypominający galaretę, przyciągając uwagę użytkownika.
Zawsze przed użyciem tego sposobu warto jest wykonać test tego, jak to wygląda. Warto to sprawdzić ze względu na to, że animacja może nie pasować lub zapętlać się niepoprawnie.