❄ Let it snow, let it snow, let it snow ❄


Hallo zusammen und einen wunderschönen 1. Advent wünsche ich euch! ♥

Ich habe mich heute Morgen so gefreut, als ich aufgestanden bin und aus dem Fenster geschaut habe, weil es tatsächlich am 1. Advent das erste Mal richtig geschneit hat diesen Winter und draußen alles mit einer dünnen weißen Decke überzogen war (was zu mindest hier in NRW die letzten Winter ja wirklich eine Seltenheit war...)
Leider konnte ich den Schnee nur von drinnen genießen, weil es draußen doch etwas ungemütlich nass-kalt war. Dafür war es hier drinnen umso schöner winterlich und gemütlich (Wie heißt es so schön: "It's beginning to look a lot like Christmas" und heute konnte man bei mir tatsächlich das erste Mal von richtiger Weihnachtsstimmung sprechen)

Auf meinem Blog ist auch schon so richtig die Winterstimmung eingezogen, wie man unschwer am Hintergrund erkennen kann. :D 
Aber auch einige Schneeflocken rieseln hier am Himmel herab und sorgen, auch wenn der Schnee in echt schon wieder anfängt zu tauen, wenigstens im Internet für ein bisschen Winterstimmung. ;)

Ich dachte mir, ich schreibe euch hier ein kleines Tutorial rein, wie genau ihr selber auch den Schnee zu euch holen könnt, wenn ihr das denn wollt. Ich finde es eigentlich immer ganz schön, den eigenen Blog ein bisschen den "Umständen" anzupassen. :)

Kleine Anmerkung: Das Tutorial ist nicht von mir (so gut kann ich leider nicht mit HTML umgehen :D), sondern ich habe es bei der lieben Mira von Copy Paste Love gesehen und wollte das gerne mit euch teilen. :)

Also, let it snow! 


1. Öffnet unter "Layout" ein neues Sidebar-Gadet und zwar "HTML/JavaScript
2. Dort fügt ihr folgenden Text ein:

<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>

3. Die markierten Zeilen legen die Größe der Schneeflocken und die Geschwindigkeit fest, mit der sie fallen. Die letzte Zeile legt die Farbe der Schneeflocken fest, die ihr ebenfalls variieren könnt. Um den Code der gewünschten Farbe zu bekommen, benutze ich immer ganz gerne den Color Picker, aber das ist natürlich ganz euch überlassen. :)

Das war es auch schon! Euer Blog kleidet sich nun auch in ein winterliches Outfit und bringt uns damit auch hier ein wenig weihnachtliche Stimmung! ♥

Dann macht euch noch einen schönen Adventssonntag und genießt die Zeit mit euren Lieben, mit Tee und Keksen und natürlich einem guten Buch. ;)

                                                                                                                      Kathi

Kommentare:

  1. Hey, Kathi,

    eine wirklich schöne Idee mit den Schneeflocken - da hat man wenigstens auf dem Blog Weihnachtsstimmung;) Bei uns hat´s heute nur geregnet, echt super mal wieder. Ich muss mal schauen, ob ich mir auch die Flocken hole, sehr HTML-begabt bin auch ich nicht... Dir noch einen schönen 1. Advent und komm heil in die neue Woche - nicht ausrutschen! :D

    LG, Claudia :)

    AntwortenLöschen
    Antworten
    1. Hi Claudia :)

      Ohje, ich schick euch die Schneewolken mal rüber ;)
      Aber bei uns ist auch wieder so gut wie alles getaut. Hoffentlich kommt da noch ein bisschen was diesen Winter, ein Schnee-Spaziergang wäre schon schön. :)

      Ich bin auch nicht wirklich begabt, was das Thema angeht, aber etwas hab ich mir über die Zeit angelesen. Ich fand das Tutorial nur so schön, weil es wirklich super einfach geht und echt nur ein paar Klicks erfordert.

      Ich hoffe mal, dass es Morgen auf dem Weg zur Arbeit nicht so glatt ist ;)

      Dir auch noch einen schönen Adventsabend :)

      Liebe Grüße ♥
      Kathi

      Löschen
  2. Hi Kathi,

    das ist ja eine süße Idee! Normalerweise bin ich nicht so ein Fan z.B. von anders geformten Mauszeigern, aber das mit dem Schnee ist dezent und stört auch beim Lesen nicht :-)

    Liebe Grüße
    Desiree

    AntwortenLöschen
    Antworten
    1. Hi Desiree!

      Ich mag das auch nicht, wenn es zu sehr vom lesen ablenkt. Aber der Schnee ist halt als dezenter Hintergrund da und bringt immer noch etwas besonderes mit rein. Das restliche Jahr über habe ich hier ja auch wenig schnick-schnack. ^^

      Liebe Grüße :)

      Löschen

Ich freue mich immer über die Kommunikation und den Austausch mit euch, also lasst mir gerne einen lieben Gruß da! :) ♥

Hinweis:
Wenn du auf meinem Blog kommentierst, werden die von dir eingegebenen Formulardaten (und unter Umständen auch weitere personenbezogene Daten, wie z. B. deine IP-Adresse) an Google-Server übermittelt. Mehr Infos dazu findest du in meiner Datenschutzerklärung (https://kathis-buecherkrams.blogspot.com/p/datenschutzerklarung.html) und in der Datenschutzerklärung von Google (https://policies.google.com/privacy?hl=de).