Shapes / Blog / Animacje elementów strony. Wtyczka do WordPressa która „rozumie” responsywność

Sposób animacji elementów strony Animacje elementów strony. Wtyczka do WordPressa która „rozumie” responsywność

Awatar autora
Łukasz Kmieć

5 stycznia 2026

Przy tworzeniu stron internetowych często dochodzimy do momentu, w którym statyczne treści to za mało. Chcemy, aby strona „żyła”, a elementy pojawiały się dynamicznie w miarę przewijania.

Często gotowe rozwiązania dostępne na rynku są bardzo rozbudowane i niepotrzebnie obciążają witrynę. Dlatego stworzyłem Shapes Smart Scroll Animations – darmową wtyczkę, który pozwala uzyskać estetyczne efekty bez zbędnego balastu, z pełną obsługą responsywności i dostępności. Link do wtyczki znajduje się na końcu tego artykułu.

Sposób animacji elementów
Sposób działania animacji.

Jak to działa od strony technicznej?

Wtyczka została napisany w czystym JavaScript (Vanilla JS), bez użycia jQuery czy innych ciężkich bibliotek. Waży zaledwie kilka kilobajtów, a jego logika opiera się na nowoczesnych standardach i maksymalnej wydajności.

1. Intersection Observer API

Zamiast obciążającego nasłuchiwania zdarzenia scroll, które potrafi „dławić” procesor, wykorzystałem Intersection Observer API. Skrypt precyzyjnie monitoruje położenie elementów z progiem czułości (1%).

Oznacza to, że animacja uruchamia się natychmiast, gdy tylko górna krawędź elementu „dotknie” pola widzenia przeglądarki. Jest to kluczowe rozwiązanie w przypadku bardzo wysokich sekcji i kontenerów – dzięki wysokiej czułości użytkownik nie musi przewijać strony do połowy bloku, aby zobaczyć efekt. Skrypt dodaje klasę .is-visible w idealnym momencie, co gwarantuje płynność wizualną.

2. Algorytm „Smart Grid Delay”

Kluczowym elementem wtyczki jest algorytm „Smart Grid Delay”. Tradycyjne podejście do opóźnień (stagger) często zawodzi na urządzeniach mobilnych – jeśli ustawimy opóźnienia na sztywno, użytkownik smartfona musiałby czekać sekundy na pojawienie się treści w jednej kolumnie. Moja wtyczka analizuje układ DOM w czasie rzeczywistym i sprawdza fizyczne położenie elementów (offsetTop). Jeśli wykryje, że elementy spadły do nowej linii, automatycznie resetuje licznik opóźnień. Dzięki temu animacja jest zawsze płynna i naturalna, niezależnie od tego, czy użytkownik ma duży monitor, czy telefon.

3. Dostępność cyfrowa

Ruch na stronie nie jest dla wszystkich. Osoby cierpiące na zaburzenia błędnika mogą źle reagować na nadmiar animacji. Wtyczka sprawdza ustawienia systemowe użytkownika za pomocą media query prefers-reduced-motion. Jeśli użytkownik ma w systemie (Windows, macOS, Android, iOS) włączoną opcję „Redukuj ruch”, wtyczka automatycznie wyłącza animacje wejścia. Strona staje się statyczna i dostępna, szanując preferencje odbiorcy.

4. Fallback dla braku JavaScript

Zastosowałem również nowoczesne podejście do zasady Progressive Enhancement. Elementy są domyślnie w pełni widoczne, co gwarantuje, że treść zawsze dotrze do odbiorcy, nawet jeśli JavaScript nie zostanie załadowany.

Aby jednak uniknąć irytującego efektu mignięcia (gdy element pojawia się na ułamek sekundy i nagle znika), wtyczka wykorzystuje oficjalny mechanizm WordPressa do natychmiastowego wstrzykiwania klasy .shps-js-enabled jeszcze przed wyrenderowaniem treści strony. Dzięki temu przeglądarka wie, że animacje są aktywne, zanim zdąży wyświetlić pierwszy piksel. Dodatkowo, dzięki optymalizacji CSS, elementy przygotowywane do animacji ukrywają się natychmiastowo, bez zbędnego ruchu czy „zjeżdżania” w dół. Masz pewność, że proces ten jest dla użytkownika niezauważalny, a animacja wystartuje stabilnie dopiero w wybranym momencie.

5. Optymalizacja renderowania

Animacje wykorzystują właściwości transform oraz opacity, a także dyrektywę will-change. Dzięki temu przeglądarka wie wcześniej, które elementy będą się zmieniać i może przenieść ciężar obliczeń na procesor graficzny (GPU).

Inteligentne zarządzanie stylami sprawia, że elementy są ukrywane natychmiastowo, a płynna animacja (transition) jest aktywowana wyłącznie w momencie ich pojawiania się na ekranie. Zapobiega to efektowi „pływania” elementów podczas ładowania strony i gwarantuje, że użytkownik widzi tylko zamierzony, czysty efekt końcowy.

Jak używać wtyczki?

Wdrożenie animacji jest bardzo proste i opiera się na dodawaniu odpowiednich klas CSS do elementów strony w edytorze WordPressa.

Krok 1: Kontener grupy (opcjonalnie)

Jeśli masz listę elementów (np. kafelki z ofertą, logotypy klientów) i chcesz, aby pojawiały się jeden po drugim („efekt fali”), otocz je kontenerem z klasą: .shps-group. Skrypt automatycznie wykryje elementy wewnątrz i nada im odpowiednie opóźnienia zgodnie z logiką Smart Grid Delay.

Krok 2: Elementy animowane

Do każdego elementu, który ma wjeżdżać, dodaj klasę bazową .shps-animated oraz klasę konkretnego efektu.

Dostępne efekty:

Przykład kodu HTML:

<div class="row shps-group">

    <div class="col-4 shps-animated shps-slide-up">
        <img src="ikona1.png">
        <h3>Szybkość</h3>
    </div>

    <div class="col-4 shps-animated shps-slide-up">
        <img src="ikona2.png">
        <h3>Wydajność</h3>
    </div>

    <div class="col-4 shps-animated shps-slide-up">
        <img src="ikona3.png">
        <h3>Responsywność</h3>
    </div>

</div>

Krok 3: Ręczne sterowanie opóźnieniem

Czasami chcemy wyróżnić jeden element, wyłamując go z automatycznej kolejki. Mamy na to dwa sposoby:

Klasy pomocnicze

Dodanie klasy .shps-delay-XXX sprawia, że skrypt Smart Grid Delay pomija ten element przy automatycznym wyliczaniu i aplikuje mu sztywny czas.

Przykład: <div class="shps-animated shps-zoom-out shps-delay-500">...</div>

Nadpisywanie CSS (dla pętli WordPress/PHP) Jeśli generujesz listę dynamicznie (np. pętla wpisów) i nie masz jak dodać klasy tylko do trzeciego elementu, użyj CSS z !important, aby nadpisać style inline dodane przez skrypt:

/* Wymuś opóźnienie 1s na trzecim elemencie w grupie */
.shps-group .shps-animated:nth-child(3) {
    transition-delay: 1.0s !important;
}

Konfiguracja globalna

Parametry nie są zaszyte głęboko w kodzie JS. Wszystkim sterują zmienne CSS (:root). Aby zmienić prędkość animacji na całej stronie, wystarczy dodać w Wygląd > Dostosuj > Dodatkowy CSS:

:root {
    --shps-duration: 0.6s;       /* Domyślnie 0.8s */
    --shps-distance: 30px;       /* Domyślnie 50px */
    --shps-ease: cubic-bezier(0.25, 1, 0.5, 1); /* Własny easing */
}

Podsumowanie

Shapes Smart Scroll Animations to dowód na to, że dedykowane, lekkie rozwiązanie jest lepsze niż uniwersalne wtyczki-kombajny. Jeśli szukasz wykonawcy, który tworzy funkcjonalności z myślą o szybkości działania i jakości kodu – zapraszam do kontaktu.

Wtyczka jest darmowa. Jeśli masz własną stronę i chcesz wdrożyć na niej animacje z wykorzystaniem opisanej w tym artykule wtyczki, możesz zainstalować ją bezpośrednio z panelu swojej strony. Wybierz Wtyczki > Dodaj wtyczkę > Szukaj wtyczek i wpisz Shapes Smart Scroll Animations.

Tagi: ,

Zobacz także