JS-Animationen

 

 

 

 

 

 

Home 
Fotografien 
Zeichnungen 
Kangaroo 
Themen 
Kontakt 
Disclaimer 
Privat / Gast 

 

 
 Open Source

 

 

 

Verschiedenes 
Filme als FLV 
MP3 als FLV 
MP3 mit HTML5 
Youtube iframe 
Thunderbird Add-ons 
Kalender in Google 
Kontaktgruppen 
JS-Animationen 
DirSync 
Notfall-DVD 
CH Mail-Provider 
Thunder-Synchro 
Dropbox selektiv 
Outlook-Kontakte 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Grüezi!ThemenComputerJS-Animationen
ZurückNach obenWeiter

Animationen mit Javascript

Dartpfeile

Ich war auf der Suche nach einem Code, mit dem ich  Dartpfeile fliegen lassen kann.

Klick dieses Bild für die Animation.

Fündig wurde ich auf dieser Seite: http://www.peters1.dk/webtools/javascript/sne.php?sprog=de Vielen Dank dem Autor. Habe noch ein paar kleine Änderungen am Code vorgenommen, damit es nicht auf Schnee, sondern auf Darts passt.

Das Javascript befindet sich in einer Datei namens dartpfeile-gelb.js. Dieses Script ist voll kompatibel zu folgenden Browsern: Firefox, Opera und Internet Explorer und ist XHTML 1,0-validiert von W3C.

Zuerst solltest Du den Dartpfeil dartpfeil-gelb.gif auf Deinem Webserver speichern. Oder nimm ein anderes Bild (Rechstklick, Speichern unter):

Lade Dir die Datei dartpfeile-gelb.js herunter und speicher sie auf Deinem Webserver.

ERKLAERUNGEN: Die Adresse ändern, in dem dartpfeil-gelb.gif gespeichert wird / Anzahl Pfeile /  +1600 statt -50, damit Pfeile lange aus dem Bild fliegen

Fuege den unten stehenden HTML-Code neben <body> auf Deiner Webpage ein.
ERINNERUNG: Deine URL in die Datei dartpfeile-gelb.js eintragen!

<script type="text/javascript" src="http://www.deinedomain.com/..../dartpfeile-gelbsnow.js"></script>

Code

var SNOW_Picture = "http://www.deinedomain.com/ordner/..../dartpfeil-gelb.gif"
var SNOW_no =  15 ;

var SNOW_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var SNOW_browser_MOZ = (self.innerWidth) ? 1 : 0;
var SNOW_browser_IE7 = (document.documentElement.clientHeight) ? 1 : 0;

var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty;
var i, SNOW_Browser_Width, SNOW_Browser_Height;

if (SNOW_browser_IE_NS)
{
    SNOW_Browser_Width = document.body.clientWidth;
    SNOW_Browser_Height = document.body.clientHeight; }
else if (SNOW_browser_MOZ)
{
    SNOW_Browser_Width = self.innerWidth - 20;
    SNOW_Browser_Height = self.innerHeight; }
else if (SNOW_browser_IE7)
{
    SNOW_Browser_Width = document.documentElement.clientWidth;
    SNOW_Browser_Height = document.documentElement.clientHeight; }

SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();

for (i = 0; i < SNOW_no; ++ i)
{

    SNOW_dx[i] = 0;
    SNOW_xp[i] = Math.random()*(SNOW_Browser_Width
+1600);
    SNOW_yp[i] = Math.random()*SNOW_Browser_Height;
    SNOW_am[i] = Math.random()*20;
    SNOW_stx[i] = 0.02 + Math.random()/10;
    SNOW_sty[i] = 0.7 + Math.random(); if (i == 0)
         document.write("<\div id=\"SNOW_flake"+ i +"\"style=\"position: absolute;
         z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><a href=\"http://www.podlech.ch\"
         target=\"_blank\">
         <\img src=\""+SNOW_Picture+"\" border=\"0\"></a><\/div>");
else document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +";
    visibility: visible; top: 15px; left: 15px;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");

}

function SNOW_Weather()
{
for (i = 0; i < SNOW_no; ++ i)
{
    SNOW_yp[i] += SNOW_sty[i];
         if (SNOW_yp[i] > SNOW_Browser_Height-50)
         {
              SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);
              SNOW_yp[i] = 0;
              SNOW_stx[i] = 0.02 + Math.random()/10;
              SNOW_sty[i] = 0.7 + Math.random();

          }
          SNOW_dx[i] += SNOW_stx[i];
          document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";           document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i] +                SNOW_am[i]*Math.sin(SNOW_dx[i])+"px"; } SNOW_Time = setTimeout("SNOW_Weather()", 10);
}
SNOW_Weather();