Hier geht es um mein Hobby das Nähen, Beauty, Produkttests und über mich!

Sonntag, 16. Dezember 2012

Schnee auf dem Bildschirm - lasst es schneien auf dem Blog

Hallo ihr Lieben!

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


Kommentare:

  1. Das wollte ich die Tage auch einfügen, ich finde, das sieht total süß aus. Übrigens backe ich gerade deine Plätzchen nach.

    AntwortenLöschen
    Antworten
    1. oooh, da freue ich mich....sag bei Gelegenheit mal, ob sie dir auch schmecken :)...lg,easy

      Löschen
    2. Sind super lecker geworden, heute überziehe ich sie noch mit Kuvertüre <3 Danke für das Rezept und die Inspiration Easy :D

      Löschen
  2. Witzig, genau das hab ich gesucht, danke :>

    AntwortenLöschen
  3. Danke 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öschen
    Antworten
    1. guck mal hier...bei dem Teil:
      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]

      da einfach die Zahlen ändern und gucken wie es aussieht. Bis es am besten gefällt :)..lg,easy

      Löschen
    2. Danke dir :) Hab heute nacht noch bisschen geschaut bis mir irgendwann eingefallen ist die nummern zu ändern haha

      Löschen
  4. Tolle Anleitung! Hab's gleich auf meinem Blog ausprobiert :)
    Liebe Grüße, Lisa ♥
    lisa-loves-cupcakes.blogspot.de

    AntwortenLöschen
  5. so einen habe ich mir letztens ausgesucht, ich glaub, wie habne sogar den gleichen schnee :D

    AntwortenLöschen
  6. macht alle meistens eh überladenen blogs nur noch langsamer...

    AntwortenLöschen
    Antworten
    1. das 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