FrankS: Wie kann ich eine Grafik animieren das sie den...

Beitrag lesen

Hi Moni!

Hier ist ein Stück Javascript Code, der ein Gif über dem restlichen Inhalt schweben lässt. Ich habs mal irgendwo kopiert und angepasst. Es geht allerdings nur mit Netscape...

Also, definiere zunächst mal ein Layer. Lege in das Layer Deine Grafik, z.B als Hintergrund (wie im Beispiel). Bei clip="   " gib die Größe des Gifs an:
<LAYER background="images/hexe.gif" clip="0,0,269,39" visibility="show" name="hexe" left="10" top="10"></LAYER>

Im Body der Seite steht folgender Code:
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var userAgent=navigator.appName + " " + navigator.appVersion;
var agentInfo=userAgent.substring(0, 12);
if(agentInfo >= "Netscape 4.0")
{
// Startpunkt
var yBase = window.innerHeight/2;
var xBase = window.innerWidth/2;
var Ypos = window.innerHeight/2;
var Xpos = window.innerWidth/2;
// Zeit zw. 2 Schritten
var delay = 5;
// Schrittweite
var step = .02;
var currStep = 0;
function animateLogo() {
  document.hexe.top  = Ypos + Math.cos((20*Math.sin(currStep/20)))*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep)/10);
  document.hexe.left = Xpos + Math.sin((20*Math.sin(currStep/20)))*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep)/10);
  currStep += step;
  setTimeout("animateLogo()", delay) ;
  }
}
animateLogo();
// -->
</script>

Die Funktion animateLogo kannst Du nun so ändern, das die Koordinaten von document.hexe.top und .left sich so ändern, das die Hexe reinschwebt. Definiere beim Erstellen des Gifs den Hintergrung des Bildes als transparent. Wenn es dann, wie im Bsp. angegeben als Layerhintergrund genutzt wird, sind die transparenten Flächen wirklich transparent und die Seite dahinter ist zu sehen.

Gruß Frank