Seit einiger Zeit schneit es schon bei mir, ich finde es echt süß, wenn man auf meinen Blog klickt und es rieseln kleine Schneesterne über den Bildschirm. Da sbeste dabei ist, man friert nicht bei dem virtuellen Schnee :)
Da ich gefragt wurde, wie ich das gemacht habe gibt es hier eine kleine Anleitung:
Anleitung
Ihr kopiert einfach folgenden Text:
<script language="JavaScript">
// Author: Yurij Gera
// TODO: make @media print... work for Mozilla and Opera
var SnowCount = exAutoCalculate();
var SnowMinSize = 12; // Minimum Snow-Font Size [Pixel]
var SnowMaxSize = 28; // Maximum Snow-Font Size [Pixel]
var SnowMinYSpeed = 0.5; // Maximum Y Speed [Pixel/Frame]
var SnowMaxYSpeed = 2.5; // Maximum Y Speed [Pixel/Frame]
var SnowMinXSpeed = 0.05; // Minumum Radial Speed [Radian/Frame]
var SnowMaxXSpeed = 0.15; // Maximum Radial Speed [Radian/Frame]
var SnowMinXDelta = 10; // Minimum X Delta [Pixel]
var SnowMaxXDelta = 20; // Maximum X Delta [Pixel]
var SnowMoveDelay = 25; // Delay [Milliseconds]
var SnowColors = ['#BBBBBB', '#DDDDDD', '#FFFFFF', '#BBBBFF']; // Snow Colors [Array]
exSnowInit();
function exSnowInit() {
SnowMoveDelay = 25; // Delay [Milliseconds]
exAddEvent(window, 'load', exSnowStart);
exAddEvent(window, 'resize', exSnowRefresh);
document.createStyleSheet().cssText = "@media print {.exSnowClass { DISPLAY: none; }}"; // IE only
}
function exAutoCalculate() {
var start = new Date();
for (var i = 0; i < 50000; i++) {
Math.random();
}
var end = new Date();
var delta = end.valueOf() - start.valueOf();
var EstimatedSnowCount = Math.min(Math.floor(10000 / delta), 500);
if (navigator.userAgent.match(/Opera/)) EstimatedSnowCount *= 0.5; // Hot fix opera
return EstimatedSnowCount;
}
function exRandom(Min, Max, Natural) {
if (typeof Natural == 'undefined')
Natural = false;
if (Natural) {
return Math.floor(Min + (Max - Min + 0.999999) * Math.random());
}
else
return Min + (Max - Min) * Math.random();
}
function exSnowStart() {
Snow = new Array();
for (i = 0; i < SnowCount; i++) {
var e = document.createElement("span");
e.className = 'exSnowClass';
e.style.fontFamily = 'Times';
e.style.fontSize = (SnowMinSize + Math.floor((SnowMaxSize - SnowMinSize) * Math.random())) + 'px';
e.style.color = SnowColors[exRandom(0, SnowColors.length-1, true)];
e.style.cursor = 'default';
e.style.position = 'absolute';
e.onselectstart = function () { return false; };
var t = document.createTextNode("*");
e.appendChild(t);
Snow[i] = document.body.appendChild(e);
}
exSnowRefresh();
exSnowMove();
}
function exSnowRefresh() {
SnowBoxWidth = document.body.clientWidth;
SnowBoxHeight = document.body.clientHeight;
for (i = 0; i < Snow.length; i++) {
var e = Snow[i];
e.YSpeed = exRandom(SnowMinYSpeed, SnowMaxYSpeed);
e.XSpeed = exRandom(SnowMinXSpeed, SnowMaxXSpeed);
e.XMaxDelta = exRandom(SnowMinXDelta, SnowMaxXDelta);
e.XDelta = Math.PI * Math.random(); // Stored Radial Delta (Radian)
e.X = exRandom(SnowMaxXDelta, SnowBoxWidth - SnowMaxXDelta - SnowMaxSize);
e.Y = exRandom(0, SnowBoxHeight - SnowMaxSize);
e.style.left = e.X + 'px';
e.style.top = e.Y + 'px';
}
}
function exSnowMove() {
for (i = 0; i < Snow.length; i++) {
with (Snow[i]) {
Y = (Y + YSpeed < SnowBoxHeight - SnowMaxSize) ? Y + YSpeed : 0;
XDelta += XSpeed;
style.left = X + Math.sin(XDelta) * XMaxDelta + 'px';
style.top = Y + 'px';
}
}
setTimeout("exSnowMove()", SnowMoveDelay);
}
function exAddEvent(o, e, f) {
if (typeof o.addEventListener != 'undefined')
o.addEventListener(e, f, false);
else if (typeof o.attachEvent != 'undefined')
o.attachEvent("on" + e, f);
else
return false;
return true;
}</script>
Nun öffnet ihr da Layout eures Blogs und fügt das Gedget "html/javascript" auf und kopiert den Text dort rein.
Ihr könnt im oberen Abschnitt die Größe und die Fallgeschwindigkeit eurer Schneeflocken noch so einstellen, bis sie euch richtig gut gefallen. Fertig!
Also, lasst es bei euch schneien :)
Liebe Grüße, easy
Das wollte ich die Tage auch einfügen, ich finde, das sieht total süß aus. Übrigens backe ich gerade deine Plätzchen nach.
AntwortenLöschenoooh, da freue ich mich....sag bei Gelegenheit mal, ob sie dir auch schmecken :)...lg,easy
LöschenSind super lecker geworden, heute überziehe ich sie noch mit Kuvertüre <3 Danke für das Rezept und die Inspiration Easy :D
LöschenWitzig, genau das hab ich gesucht, danke :>
AntwortenLöschenDanke für die Anleitung :) bei mir schneit es auch jetzt, aber ich habe nicht so richtig verstanden wo man die geschwindigkeit und größe ändern kann.
AntwortenLöschenguck mal hier...bei dem Teil:
Löschenvar SnowCount = exAutoCalculate();
var SnowMinSize = 12; // Minimum Snow-Font Size [Pixel]
var SnowMaxSize = 28; // Maximum Snow-Font Size [Pixel]
var SnowMinYSpeed = 0.5; // Maximum Y Speed [Pixel/Frame]
var SnowMaxYSpeed = 2.5; // Maximum Y Speed [Pixel/Frame]
var SnowMinXSpeed = 0.05; // Minumum Radial Speed [Radian/Frame]
var SnowMaxXSpeed = 0.15; // Maximum Radial Speed [Radian/Frame]
da einfach die Zahlen ändern und gucken wie es aussieht. Bis es am besten gefällt :)..lg,easy
Danke dir :) Hab heute nacht noch bisschen geschaut bis mir irgendwann eingefallen ist die nummern zu ändern haha
LöschenTolle Anleitung! Hab's gleich auf meinem Blog ausprobiert :)
AntwortenLöschenLiebe Grüße, Lisa ♥
lisa-loves-cupcakes.blogspot.de
so einen habe ich mir letztens ausgesucht, ich glaub, wie habne sogar den gleichen schnee :D
AntwortenLöschenmacht alle meistens eh überladenen blogs nur noch langsamer...
AntwortenLöschendas kann ich nicht beurteilen, bei anderen Blogs, aber bei mir gibt es keine Ladeprobleme, es surft ja heute keiner mehr mit Modem..lg,easy
Löschen