Wie kann ich eine Grafik animieren das sie den...
moni
- html
Anschein hat, sie wuerde reinfliegen. z.B ist eine kleine Hexe die beim Start der Seite so reinfliegen soll....Bitte um eine Hilfe. Danke LG Moni
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
Anschein hat, sie wuerde reinfliegen. z.B ist eine kleine Hexe die beim Start der Seite so reinfliegen soll....Bitte um eine Hilfe. Danke LG Moni
Hi Moni,
lade dir doch einfach unter unter www.macromedia.com den dreamweaver3 runter, damit kannst du sowas machen (auch wenn mich jetzt alle JS-Coder schlagen werden ;) )
Gruss, Tobi