Ćwiczenie: Animacje HTML, CSS i JavaScript

🎯 Cel ćwiczenia

Animacje webowe to potężne narzędzie do tworzenia interaktywnych i angażujących stron internetowych. W tym ćwiczeniu nauczysz się podstaw animacji CSS oraz JavaScript, aby tworzyć dynamiczne efekty wizualne.

Czego się nauczysz:

Tworzenia prostych animacji CSS (transitions)
Budowania złożonych animacji (@keyframes)
Kontrolowania animacji za pomocą JavaScript
Optymalizacji animacji pod kątem wydajności

📖 Część 1: Animacje CSS - Transitions

Czym są CSS Transitions?

Transitions pozwalają na płynne przejście pomiędzy wartościami właściwości CSS. Są idealne do prostych animacji wywoływanych przez interakcje użytkownika (hover, focus, click).

Przykład 1: Przycisk z efektem hover

HTML:

<button class="animated-button">Najedź na mnie</button>

CSS:

.animated-button {
  background-color: #3498db;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.animated-button:hover {
  background-color: #2980b9;
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
                

Wyjaśnienie: Właściwość transition określa, które właściwości mają być animowane, czas trwania animacji oraz funkcję przejścia (timing function).

🎨 Część 2: Animacje CSS - @keyframes

@keyframes pozwalają na tworzenie bardziej złożonych animacji z wieloma etapami. Możesz precyzyjnie kontrolować każdy krok animacji.

Przykład 2: Pulsująca kulka

HTML:

CSS:

.pulse {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
                

Wyjaśnienie: @keyframes definiuje kroki animacji w procentach (0%, 50%, 100%). Właściwość animation łączy element z animacją.

⚡ Część 3: Animacje JavaScript

JavaScript daje pełną kontrolę nad animacjami, pozwalając na złożone interakcje i dynamiczne zmiany w odpowiedzi na działania użytkownika.

Przykład 3: Animowany licznik

HTML:

<div id="counter">0</div>
<button onclick="startCounter()">Start</button>
                

JavaScript:

function startCounter() {
  let count = 0;
  const target = 100;
  const duration = 2000; // 2 sekundy
  const increment = target / (duration / 16);
  
  const timer = setInterval(() => {
    count += increment;
    if (count >= target) {
      count = target;
      clearInterval(timer);
    }
    document.getElementById('counter').textContent = Math.floor(count);
  }, 16); // ~60 fps
}
                

Wyjaśnienie: Używamy setInterval do aktualizacji wartości co 16ms (około 60 klatek na sekundę), co daje płynną animację licznika.

✏️ ZADANIA PRAKTYCZNE

Zadanie 1: Bouncing Ball

ŁATWY

Cel: Stwórz animację piłki odbijającej się od dolnej krawędzi kontenera.

Wymagania:

Użyj @keyframes do animacji ruchu w pionie
Piłka powinna zacząć na górze i opadać w dół
Zastosuj timing-function: ease-in dla efektu grawitacji
Animacja powinna się powtarzać w nieskończoność

Wskazówka: Użyj transform: translateY() do przesuwania piłki.

Zadanie 2: Menu rozwijane

ŚREDNI

Cel: Stwórz animowane menu rozwijane, które pojawia się po kliknięciu przycisku.

Wymagania:

Użyj JavaScript do przełączania klasy CSS
Menu powinno się wysuwać z góry (translateY)
Dodaj efekt fade-in (opacity)
Czas trwania animacji: 0.3s

Wskazówka: Stwórz klasę .active z odpowiednimi stylami i przełączaj ją za pomocą classList.toggle().

Zadanie 3: Loading Spinner

ŚREDNI

Cel: Stwórz animowany spinner ładowania z trzech kółek pulsujących na zmianę.

Wymagania:

Trzy kółka obok siebie
Każde kółko pulsuje (scale) z opóźnieniem
Użyj animation-delay dla efektu fali
Animacja w pętli nieskończonej

Wskazówka: Ustaw animation-delay: 0s, 0.2s, 0.4s dla kolejnych kółek.

Zadanie 4: Interaktywna Karta 3D

TRUDNY

Cel: Stwórz kartę, która obraca się w 3D po kliknięciu, pokazując rewers.

Wymagania:

Użyj transform: rotateY() dla efektu 3D
Karta ma dwie strony (przód i tył)
Po kliknięciu karta się obraca o 180 stopni
Zastosuj perspective dla efektu głębi
Dodaj transition dla płynnego obrotu

Wskazówka: Użyj backface-visibility: hidden; aby ukryć tylną stronę karty podczas obrotu.

💡 WSKAZÓWKI I NAJLEPSZE PRAKTYKI

1. Wydajność

Animuj tylko właściwości transform i opacity dla najlepszej wydajności
Unikaj animowania width, height, top, left - wymuszają one ponowne układanie strony
Używaj will-change dla złożonych animacji (ostrożnie!)

2. Timing Functions (Funkcje przejścia)

ease: wolny start, szybki środek, wolny koniec (domyślna)
ease-in: wolny start, szybkie przyspieszenie
ease-out: szybki start, wolny koniec
ease-in-out: wolny start i koniec
linear: stała prędkość przez cały czas
cubic-bezier(): własna krzywa przejścia

3. Dostępność

Respektuj prefers-reduced-motion dla użytkowników wrażliwych na ruch
Nie używaj zbyt szybkich lub agresywnych animacji
Upewnij się, że animacje nie zakłócają czytelności treści

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
                

📚 DODATKOWE ZASOBY

🎉 PODSUMOWANIE

Gratulacje! Po ukończeniu tego ćwiczenia powinieneś umieć:

✅ Tworzyć proste animacje CSS przy użyciu transitions
✅ Budować złożone animacje z @keyframes
✅ Kontrolować animacje za pomocą JavaScript
✅ Optymalizować animacje pod kątem wydajności
✅ Tworzyć responsywne i dostępne animacje

Powodzenia w nauce! 🚀