Download Mit einer PayPal-Spende danken Letztes Update: 11.11.2012
Der Winter und Weihnachten stehen vor der Tür. So langsam wird es Zeit, auch die eigene Homepage dieser Zeit anzupassen.
Zum Beispiel mit diesem Schnee Script, das weitestgehend frei konfigurierbar ist!
Der Einbau ist grundsätzlich in 3 Schritten erledigt: Die gewünschte Grafik hochladen, das Script hochladen, in die Seite einbauen.
Passende TYPO3-Extension gefällig?
1) Die gewünschte Grafik hochladen
Rechtsklick auf die Grafik, "Grafik speichern unter..." wählen und die Grafik in das selbe Verzeichnis wie das Script speichern.
Natürlich kann dafür auch jede andere transparente Gif-Grafik genutzt werden...
2) Das Script hochladen
Nun muss der wichtigste Bestandteil des Scriptes hochgeladen werden, die JavaScript Datei snow.js.
Hier finden Sie die Script Datei: snow.js
Rechtsklick auf den Link, "Ziel speichern unter..." wählen und hochladen auf den eigenen Webspace.
Hier der Quellcode:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
/* * Schnee-Script * @author Oliver Schlöbe <scripts@schloebe.de> * @example http://www.schloebe.de/scriptdemos/schloebe_snow/snowtest.html * @link http://www.schloebe.de/scripts/schnee-script/ * @since 111112 */ var schloebesnow = { no: 15, // Anzahl der Schneeflocken speed: 20, // "Schnei-Geschwindigkeit"; je kleiner die Zahl, um so schneller fallen die Flocken snowflake: "http://www.schloebe.de/wp-content/themes/schloebe_de/images/snow/snow.gif", // Bild der Schneeflocke, beliebig /*********************************/ /** Ab hier nichts mehr ändern! **/ /*********************************/ ns4up: (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") ? 1 : 0, // Browser Tester ie4up: (document.all) ? 1 : 0, ns6up: (document.getElementById&&!document.all) ? 1 : 0, i: 0, dx: new Array(), xp: new Array(), yp: new Array(), am: new Array(), stx: new Array(), sty: new Array(), doc_width: 800, doc_height: 800, let_it_snow: function() { if( this.ns4up || this.ns6up ) { // Bildschirm-Auflösung holen, Netscape-Funktion this.doc_width = self.innerWidth; this.doc_height = self.innerHeight; } else if( this.ie4up ) { // Bildschirm-Auflösung holen, Internet Explorer-Funktion this.doc_width = document.body.clientWidth; this.doc_height = document.body.clientHeight; } this.doc_height = (this.doc_height==0) ? document.documentElement.clientHeight : this.doc_height; for( this.i = 0; this.i < this.no; ++ this.i ) { this.dx[this.i] = 0; // Koordinaten-Variable setzen this.xp[this.i] = Math.random()*(this.doc_width-50); // Position-Variable setzen this.yp[this.i] = Math.random()*this.doc_height; this.am[this.i] = Math.random()*20; // Amplituden-Variable setzten this.stx[this.i] = 0.02 + Math.random()/10; // Variable für Schrittweite setzen this.sty[this.i] = 0.7 + Math.random(); // Variable für Schrittweite setzen if( this.ns4up ) { if (this.i == 0) { document.write("<layer name=\"dot"+ this.i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(this.snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ this.i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(this.snowflake + "\" border=\"0\"></layer>"); } } else if( this.ie4up || this.ns6up ) { if (this.i == 0) { document.write("<div id=\"dot"+ this.i +"\" style=\"position: "); document.write("absolute; z-index: "+ this.i +"; visibility: "); document.write("visible; top: 15px; left: 15px;\"><img src=\""); document.write(this.snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ this.i +"\" style=\"position: "); document.write("absolute; z-index: "+ this.i +"; visibility: "); document.write("visible; top: 15px; left: 15px;\"><img src=\""); document.write(this.snowflake + "\" border=\"0\"></div>"); } } } if( this.ns4up ) { this.snowNS(); } else if( this.ie4up ) { this.snowIE(); }else if( this.ns6up ) { this.snowNS6(); } }, /* * Haupt-Animations-Funktion für Netscape */ snowNS: function() { for( this.i = 0; this.i < this.no; ++ this.i ) { this.yp[this.i] += this.sty[this.i]; if( this.yp[this.i] > this.doc_height-50 ) { this.xp[this.i] = Math.random()*(this.doc_width-this.am[this.i]-30); this.yp[this.i] = 0; this.stx[this.i] = 0.02 + Math.random()/10; this.sty[this.i] = 0.7 + Math.random(); this.doc_width = self.innerWidth; this.doc_height = self.innerHeight; this.doc_height = (this.doc_height==0) ? document.documentElement.clientHeight : this.doc_height; } this.dx[this.i] += this.stx[this.i]; document.layers["dot"+this.i].top = this.yp[this.i]; document.layers["dot"+this.i].left = this.xp[this.i] + this.am[this.i]*Math.sin(this.dx[this.i]); } setTimeout("schloebesnow.snowNS()", this.speed); }, /* * Haupt-Animations-Funktion für Internet Explorer */ snowIE: function() { for( this.i = 0; this.i < this.no; ++ this.i ) { this.yp[this.i] += this.sty[this.i]; if( this.yp[this.i] > this.doc_height-50 ) { this.xp[this.i] = Math.random()*(this.doc_width-this.am[this.i]-30); this.yp[this.i] = 0; this.stx[this.i] = 0.02 + Math.random()/10; this.sty[this.i] = 0.7 + Math.random(); this.doc_width = document.body.clientWidth; this.doc_height = document.body.clientHeight; this.doc_height = (this.doc_height==0) ? document.documentElement.clientHeight : this.doc_height; } this.dx[this.i] += this.stx[this.i]; document.all["dot"+this.i].style.pixelTop = this.yp[this.i]; document.all["dot"+this.i].style.pixelLeft = this.xp[this.i] + this.am[this.i]*Math.sin(this.dx[this.i]); } setTimeout("schloebesnow.snowIE()", this.speed); }, /* * Haupt-Animations-Funktion für Netscape6 und Mozilla */ snowNS6: function() { for( this.i = 0; this.i < this.no; ++ this.i ) { this.yp[this.i] += this.sty[this.i]; if( this.yp[this.i] > this.doc_height-50 ) { this.xp[this.i] = Math.random()*(this.doc_width-this.am[this.i]-30); this.yp[this.i] = 0; this.stx[this.i] = 0.02 + Math.random()/10; this.sty[this.i] = 0.7 + Math.random(); this.doc_width = self.innerWidth; this.doc_height = self.innerHeight; this.doc_height = (this.doc_height==0) ? document.documentElement.clientHeight : this.doc_height; } this.dx[this.i] += this.stx[this.i]; document.getElementById("dot"+this.i).style.top = this.yp[this.i]+"px"; document.getElementById("dot"+this.i).style.left = this.xp[this.i] + this.am[this.i]*Math.sin(this.dx[this.i])+"px"; } setTimeout("schloebesnow.snowNS6()", this.speed); } } schloebesnow.let_it_snow(); |
Die ersten 3 Zeilen sind beliebig anpassbar. In Kommentaren dahinter findet sich jeweils der Effekt, den eine Änderung hat. Es sollten nur die ersten 3 Zeilen verändert werden, sonst kann es zu Fehlfunktionen im Script kommen.
3) Das Script aufrufen
Nun muss das Script noch in die Seite eingebunden werden, auf der der Schnee fallen soll. Dies ist mit einer Zeile Code getan:
<script src="http://www.IhreDomain.de/snow.js" type="text/javascript"></script>
Diesen Code fügen Sie innerhalb der <body> ... </body> Tags ein, fertig. Nicht vergessen, die URL an die Ihre anzupassen!
Hey Leute,
ich wollte mal fragen, wie das Einbinden funktioniert…
Ich bin in dieser Beziehung ein ziehmlicher Laie, und habe alles Mögliche versucht, aber es bis jetzt leider nicht geschafft…
Es wäre schön, wenn mir jemand schnell helfen könnte, da ich die Schnee-Saison für meine Webseite nicht verpassen möchte…
momentan ist das Skript offensichtlich falsch, aber ich lasse es ainfach mal bei der letzten Änderung, da es ja momentan keine Funktion hat.
Vielen Dank schon im Vorraus.
Hey.
ich würd das gern auf der Firmenseite einbinden. leider hab ich die über 1&1 erstellt da hab ich lediglich die möglichkeit im header was einzutragen. Funktioniert das hier dann auch? so recht gesehen das ich über n ftp da was hochladen kann hab ich nicht gefunden. wäre n schönes gimmick.
viele liebe Grüße
mona
Hey Mona,
wenn du Quelltext bearbeiten oder Scripts einfügen kannst, dann kannst du das Schnee-Script nutzen. Allerdings beschränken “Massen-Hoster” wie 1und1 diesen Zugriff sehr oft aus Sicherheitsgründen.
Hier sehe ich gerade einige Kommentare mit fragen wie das mit dem Schnee usw. funktioniert. Das allerwichtigste daran ist das mann sich mit dem verwenden von htlm Code beschäfftigt. Jeder Code hat eine Aufgabe. Und wenn mann das alles im einzelnen erklären wollte müsste mann sich auch noch ewig lange damit beschäfftigen wie die Zeit die mann nötig hatte es selber zu lernen.
Den grössten Fehler den viele machen sich einfach was von anderen HP,s raus zu ziehen. Ist nämlich dumm wenn Automatische funktionen drinn hängen die die HP auf den Kopf stellen können.
Vielen Dank für das Script, hab diesen Tipp auch gleich mal verlinkt in meinem Blog. Man muss schon aufpassen, wenn man ein komplettes Script benutzt, wenn man eine größere Webseite hat, die bereits viele Funktionen nutzt, jedoch bezweifle ich das viele Firmen sich so ein Script einbauen.
Habe das script für die Homepage eines guten Freundes benutzt, allerdings nicht für Schneeflocken sonder statt der Schneeflocken fliegen da Bienchen. Es wäre aber schöner wenn die Bienen von unten nach oben fliegen würden. Wäre das auch möglich.
MFG Andreas
Hi!
Bei mir hat es erst funktioniert, als ich das Script direkt integriert habe, mit dem externen Link komischerweise nicht.
Aber funktioniert super und sieht total schön aus!
Vielen Dank!
Hallo!
Auch ich probiere mit dem Script gerade mal ein wenig herum …
Irgendwie bringt die Änderung der Parameter leider keine Änderung?!
Wie ist denn der Min,- bzw. Max.-Wert für die Anzahl der Flocken und/oder der Geschwindigkeit?!
Gruß,
Nils
ich hab das Script in meine Weblica Seiten eingebaut und alles funktioniert einwandfrei…..sieht sehr gut aus, danke für das Script.
Hallo, in welche datei muss der Code schnipsel den reintan werden ?
Hallo Dennis, einfach die Schritte 1 bis 3 von oben ausführen.
Hallo Oliver,
ich habe dein Script in meine Webseite “www.joggen-in-nrw.de” eingebaut.
Bei Firefox, Opera und Crome läuft alles super.
Bei IE7 und IE8 klappt es leider nicht, leider schauen immer noch zu viele Leute damit auf meine Seite.
Ich habe mit meinem Dreamweaver mal ein alert hier eingesetzt und sehe das IE hier nicht hinkommt.
} else if( this.ie4up || this.ns6up ) {
alert(“bingo”)
if (this.i == 0) {
Gruß Klaus
Hallo Klaus,
kannst du mal prüfen, ob das hier auch nicht im IE7/IE8 läuft? http://www.schloebe.de/scriptdemos/schloebe_snow/snowtest.html
Bei mir klappt es nämlich. Vielleicht verträgt es sich nicht mit anderen Scripts auf deiner Seite?
Hallo Oliver,
dein Link läuft im IE7/IE8.
Es scheint wohl so, dass sich die Scripte nicht vertragen. Ich benutze Mootools und auch einige Selbstentwicklungen.
Dann muß ich mal versuchen einige Scripte abzuschalten, vielleicht scheint ja auch bald die Sonne!
Vielen Dank für deine Antwort und ein schönes Weihnachtsfest.
Klaus
Hakko !
Ich habe den Schnee eingebaut. Es schneit auch gut, allerdings bei Chrome und Opera nur solange bis man die Seite nach oben schiebt, dann hört der Schnee auf der gedachten Linie Bildschirmende, die ja dann nach oben wandert , auf. Kann man das ändern ???
Danke für den Schnee und für die Anwort.
Viele Grüße aus dem verschneiten Ulm
Udo
Also ich habe jeden schritt verfolgt, aber anscheinend funktioniert es nicht bei mir.
Ich habe auch über mehrere Browser geguckt, aber bei keinem zu sehen
Habe das gleich Problem wie Udo. Wenn die Seite gescrollt wird endet das schneien am gedachten Bildschirmende. Kann man sowas beheben?
hallo,
muss ich am js code die domain auch noch ändern??
rein soll das ganze in meinen chat.
weil wenn ich alles einspiele wie beschreben gehts leider nicht ohne änderungen.
soll die js in den ordner js und die grafik auch dort rein in die js oder in pic ordner
http://www.powerstarradio.at/pcpin_chat_v622
* Schnee-Script
* @author Oliver Schlöbe
* @example http://www.schloebe.de/scriptdemos/schloebe_snow/snowtest.html
* @link http://www.schloebe.de/scripts/schnee-script/
* @since 111112
*/
var schloebesnow = {
no: 15, // Anzahl der Schneeflocken
speed: 20, // “Schnei-Geschwindigkeit”; je kleiner die Zahl, um so schneller fallen die Flocken
snowflake: “http://www.schloebe.de/wp-content/themes/schloebe_de/images/snow/snow.gif”, // Bild der Schneeflocke, beliebig
/*********************************/
Hi,
wer auch das Problem hat das es im Internet Explorer nicht angezeigt wird der möge seine Skriptzeile z.B.:
…im einfügen, dann gehts. Steht ja auch so in der Anleitung aber kann man ja leicht überlesen
Grüße und schöne Weihnachten
Hallo!
Bengie
December 24, 2012 at 9:16 pm
Hi,
wer auch das Problem hat das es im Internet Explorer nicht angezeigt wird der möge seine Skriptzeile z.B.:
…im einfügen, dann gehts. Steht ja auch so in der Anleitung aber kann man ja leicht überlesen
Leider werde ich aus diesem Text nicht schlau:::: Skriptzeile z.B.: …im einfügen
Was soll ich einfügen ????
Dank im voraus für die Antwort.
Udo