Animacje na przewijanie, pojawianie się komponentów

Animacje na przewijanie, pojawianie się komponentów

Animacje uruchamiane podczas przewijania strony lub przy pojawieniu się elementów na ekranie to jedno z najczęściej stosowanych rozwiązań w nowoczesnym web designie. Służą one przede wszystkim do prowadzenia uwagi użytkownika, nadawania płynności interfejsowi oraz wzmacniania hierarchii treści.

W tej lekcji skupimy się na tym, jak takie animacje można zrealizować w 100% za pomocą CSS, bez użycia JavaScriptu – w prostych, wydajnych projektach. Omówimy też sytuacje, gdzie CSS nie wystarczy i warto połączyć go z JS.

Efekt, który chcemy osiągnąć

Przykład: użytkownik przewija stronę i gdy sekcja staje się widoczna, jej elementy (np. nagłówki, zdjęcia, karty) łagodnie wjeżdżają, wyłaniają się, rozsuwają lub zmieniają swoją przezroczystość.

1. Strategia czystego CSS – animacje przy załadowaniu

Jeśli chcesz, aby animacja uruchamiała się po wejściu na stronę (np. „hero” lub intro), wystarczy użyć klasy z animacją i właściwości animation:

<section class="hero-section fade-in">
  <h1>Witamy na stronie</h1>
</section>

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

Efekt: element pojawia się z lekkim przesunięciem w dół i rosnącą przezroczystością. Świetnie sprawdza się w nagłówkach lub call to action.

2. Sekwencyjne animacje wielu elementów

Aby animacje nie pojawiały się jednocześnie, można użyć animation-delay – np. dla listy lub siatki kart:

<ul class="features">
  <li class="fade-in delay-1">Funkcja 1</li>
  <li class="fade-in delay-2">Funkcja 2</li>
  <li class="fade-in delay-3">Funkcja 3</li>
</ul>

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

Możesz również zastosować nth-child() w CSS – dla jeszcze czystszego kodu, bez dodatkowych klas.

3. Animacje przy przewijaniu – CSS + klasa z JavaScriptu

Czysty CSS nie wykryje sam momentu, kiedy element staje się widoczny na ekranie. Ale możesz przygotować gotowe klasy animacyjne, a dodanie ich w odpowiednim momencie zostawić JS-owi. Wystarczy jeden mały skrypt (opcjonalnie – tylko jeśli chcesz animację dopiero przy przewinięciu):

// Użyj Intersection Observer (opcja – poza CSS)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
    }
  });
});

document.querySelectorAll('.scroll-animate').forEach((el) => {
  observer.observe(el);
});

W HTML wystarczy dać klasę .scroll-animate na tych elementach, które mają się animować, gdy pojawią się na ekranie. Samo .fade-in jest już CSS-em.

4. Właściwości wspierające animacje „na wejście”

• animation-delay – opóźnienie uruchomienia animacji
• animation-duration – czas trwania animacji
• animation-fill-mode: forwards – pozwala utrzymać końcowy stan animacji (np. widoczność)
• animation-timing-function – np. ease, ease-out, cubic-bezier() dla płynności

5. Dobre praktyki

• Nie przesadzaj z ilością – 1–2 efekty wejścia na sekcję wystarczą
• Zadbaj o dostępność – nie animuj zbyt agresywnie ani za szybko
• Używaj klas warunkowych – łatwiej nimi zarządzać
• Testuj w różnych przeglądarkach, w tym mobilnych

Ćwiczenie

Stwórz sekcję .intro-features, która zawiera:

• nagłówek główny
• 3 bloki (np. zalety produktu), które wyłaniają się sekwencyjnie z dołu
• każdy blok powinien mieć inny animation-delay, by efekt był płynny

Nie musisz korzystać z JavaScriptu – wystarczy, że animacje pojawią się przy załadowaniu strony.

Wniosek

Animacje CSS przy przewijaniu lub wejściu to potężne narzędzie UX. Wzmacniają wizualny rytm strony, poprawiają zrozumiałość interfejsu i dają użytkownikowi sygnał, że coś się właśnie zmieniło. Nawet drobny efekt wejścia komponentu potrafi podnieść jakość odbioru całego layoutu.