Animation

Dateien: index.html, schmetterling.js

Doppelt animierte Grafiken

Mit doppelt animierter Grafik ist hier gemeint, dass die Grafik selbst ein animiertes GIF (mit transparenten Hintergrund) ist und dieses GIF zusätzlich noch die Position auf der Seite wechselt. Die entsprechenden Stellen sind im Quelltext mit „Animation Schmetterling“ gekennzeichnet.

Position durch CSS

Durchsuchen wir zunächst wieder den Quelltext der Index-Seite des Beispiels: Als erstes finden wir dort mehrere Positionen (.pos0 - .pos9), welche im JavaScript-Teil zur Animation benutzt werden. Hier können sie ihrem Schmetterling also die Flugroute vorgeben.

/* Animation Schmetterling (für function animateButterfly()) */
.pos0 { position:absolute; Left:230px; Top:60px;  }
.pos1 { position:absolute; Left:215px; Top:70px;  }
.pos2 { position:absolute; Left:225px; Top:60px;  }
.pos3 { position:absolute; Left:240px; Top:65px;  }
.pos4 { position:absolute; Left:255px; Top:75px;  }
.pos5 { position:absolute; Left:285px; Top:90px;  }
.pos6 { position:absolute; Left:275px; Top:110px; }
.pos7 { position:absolute; Left:255px; Top:135px; }
.pos8 { position:absolute; Left:270px; Top:170px; }
.pos9 { position:absolute; Left:295px; Top:195px; }

Aufruf JavaScript

Dann finden wir das <img>-Tag des Schmetterlings innerhalb eines <div> (mit der Vorgabepoition .pos1). Interessant ist das neue Attribut onmouseover="", welches die JS-Funktion animateButterfly() startet, wenn die Maus über das Element (hier das Bild) fährt.

<div class="pos1" id="butterflyDiv">
<!-- Animation Schmetterling per mouseover starten -->
  <img id="butterflyImg"
       src="bilder/schmetterling.gif"
       height="80"
       alt="animierter Schmetterling"
       onmouseover="javascript:animateButterfly())"/>
</div>

Ein Stückchen weiter unten wird diese Funktion noch einmal innerhalb eines Links aufgerufen. Der Link bekommt dazu als Schema „javascript:“ angewiesen, damit er weiss, dass er Javascript aufrufen soll.

<p>
<!-- Animation Schmetterling per Link starten -->
  <a href="javascript:animateButterfly()">
    Flieg, Schmetterling, flieg!
  </a>
</p>

Den eigentlichen JavaScript-Code in schmetterling.js werden wir nicht genauer analysieren, da er an dieser Stelle viel zu komplex ist.

Zusammenfassung

Animationen auf Webseiten erreichen sie mittels

• animierten GIFs (Grafiken)
• JavaScript-Code