Animacje i interaktywne elementy multimedialne

1. Po co animacje i interaktywne multimedia?

Uatrakcyjniają stronę WWW, przyciągają uwagę
Polepszają UX (doświadczenie użytkownika), pozwalają sterować multimediami
Pokazują procesy, zmiany, efekty działania — edukacja, sprzedaż, informacja

2. Prosta animacja CSS3 (efekt wirującego obiektu)

<div class="anim-demo"></div>

/* CSS animacja */
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
.anim-demo {
  animation: spin 2.5s linear infinite;
}
    

Co można animować w CSS?

Właściwości: położenie, kolor, rozmiar, przezroczystość, obrót, cień. Najczęściej: transform, opacity, background.

3. Interaktywna galeria zdjęć (HTML + CSS + JS)

Poniżej galeria, w której kliknięcie powiększa zdjęcie (JS).

<div class="gallery">

  <img src="img1.jpg" onclick="enlarge(this)">

  <img src="img2.jpg" ...>

</div>
/* CSS: galeria+hover */
/* JS: function enlarge(img){...} */
    

4. Efekty multimedialne — co jeszcze?

Gify i animacje SVG, granie dźwięku (JS - Audio())
Przejścia stron (Fade, Slide)
Interaktywne quizy i ankiety
Animowane liczby, paski postępu, przyciski reagujące na kliknięcie

Jak wstawić dźwięk po kliknięciu?

let audio=new Audio('sound.mp3'); audio.play();

Przykład animacji ruchu (CSS)

<div id="moveBox"></div>

#moveBox { width:60px;height:40px; background:linear-gradient(90deg,#ffd600,#7b1fa2); position:absolute; left:0; top:10px;
  border-radius:10px; animation: moveHoriz 3s linear infinite alternate;}
@keyframes moveHoriz {from {left:0;} to {left:calc(100% - 60px);}}

Animacja zmiany koloru i rozmiaru po najechaniu (CSS)

<div id="animHover"></div>

#animHover {width:70px;height:70px; background:#7b1fa2; border-radius:40%; transition:.44s;}
#animHover:hover {background:#ffd600; width:110px; height:60px; border-radius:70%;}

Interaktywny efekt „pokaż/ukryj” (JS + CSS)

<button onclick="showHideAnim()">Pokaż / Ukryj</button>

<div id="hiddenAnim">...</div>


/* CSS przejście: */
#hiddenAnim {transition:.6s; opacity:1;}
/* JS: */
function showHideAnim() {
  const el=document.getElementById('hiddenAnim');
  if(el.style.display==='none'||el.style.display==='') {
    el.style.display='block'; el.style.opacity=1; el.innerHTML='Magiczny animowany blok!';
  }else{
    el.style.opacity=0; setTimeout(()=>el.style.display='none',500);
  }
}
  

Animowany przycisk (efekt bounce – CSS)

<button class="bounceBtn">Kliknij mnie!</button>


.bounceBtn {
  animation: btnBounce 1.5s infinite;
}
@keyframes btnBounce {
  0% {transform: translateY(0);}
  35% {transform: translateY(-11px);}
  60% {transform: translateY(1px);}
  100% {transform: translateY(0);}
}
  

Ćwiczenie praktyczne — stwórz własny efekt!

Zaprojektuj prosty obiekt (np. kółko, kwadrat, ikona), który porusza się lub zmienia kolor.
Zbuduj interaktywną galerię (minimum 3 zdjęcia), podłącz funkcję powiększania zdjęcia (JS).
(Poziom ambitny) Dodaj dźwięk odtwarzany przy kliknięciu dowolnego zdjęcia.

Wskazówka: Testuj animacje w CodePen lub JSFiddle. Skorzystaj z bibliotek AOS, Animate.css do poważniejszych efektów.