Animacje modułów przy przewijaniu strony

Aby bardziej uatrakcyjnić wygląd sklepu, wprowadzona jest możliwość ustawienia animacji pojawiania się modułów oraz kolumn modułów podczas przeglądania strony przez klienta. Efekty uruchamiają się w momencie, gdy element wejdzie w obszar widoczny ekranu (podczas przewijania) - animacje są oparte o bibliotekę AOS (Animate On Scroll).
 

Jak działa w panelu ?

W ustawieniach kolumn modułów kreatora modułów w menu Wygląd / Moduły środkowe dodane jest pole wyboru: "Animacja przy przewijaniu strony". Lista rozwijana pozwala wybrać efekt lub ustawić "brak animacji". Dostępnych jest kilkanaście efektów w tym m.in.:

• zanikanie (fade) - np. zanikanie, pojawianie/znikanie, pojawianie od dołu/góry/lewej/prawej, narożniki (od dołu z lewej/prawej, z góry z lewej/prawej)
• obrót (flip) - np. obrót od dołu, od góry, z lewej, z prawej
• przesunięcie (slide) - np. wsunięcie od dołu, z góry, z lewej, z prawej
• powiększenie / pomniejszenie (zoom) - np. powiększenie, powiększenie od dołu/góry/lewej/prawej oraz pomniejszenie w analogicznych wariantach

Efekt po stronie klienta (na stronie sklepu)

Po ustawieniu animacji konkretna kolumna modułu nie pojawia się "na sztywno" od razu, tylko wykonuje wybrany efekt wejścia. Animacja uruchamia się podczas przewijania, gdy element dojdzie do widoku użytkownika. Daje to nowoczesny, dynamiczny wygląd strony i pozwala wyróżnić sekcje (np. banery, boxy informacyjne, kafelki, listy produktów).
 

Korzyści praktyczne

• poprawa wrażeń wizualnych (UX) i „nowoczesności” sklepu
• możliwość subtelnego zwrócenia uwagi na ważne elementy (np. promocje, korzyści, CTA)
• elastyczność: animację można ustawić dla każdej kolumny modułu osobno lub całkowicie wyłączyć

Dobre praktyki użycia (żeby nie przesadzić)

• stosuj animacje oszczędnie (najlepiej dla kluczowych sekcji)
• dla treści informacyjnych wybieraj subtelne fade/slide zamiast agresywnych flip/zoom
• unikaj animowania zbyt wielu elementów naraz (może to obciążać stronę i rozpraszać)