Schnee im Chat

[ZischDings]

.
Die benötigte schnee.js (vielen Dank an Berlinmann1 )
Im oberen Bereich kann einiges angepasst werden (z.B. Anzahl der Schneeflocken, Fallgeschwindigkeit etc.)

Script:Zeigen

//
// Copyright (C) 2008 by Fabian Schlieper
// Schnee v1.2
// http://www.fabi.me/
// Ohne dieses Copyright darf dieser Code nicht verwendet werden!
//

// die ID des HTML-Elements, in dem es schneien soll
var snow_area_id = 'winter';

// maximale Anzahl der sichtbaren Schneeflocken
var snow_flake_count = 100;

// die verschiedenen Farbe, die die Schneeflocken haben sollen
var snow_colors = new Array('#AAAACC','#DDDDFF','#CCCCDD','#F3F3F3','#F0FFFF');

// die Schriftarten, aus denen die Schneeflocken bestehen sollen
var snow_fonts = new Array('Arial Black', 'Arial Narrow', 'Times', 'Comic Sans MS');

var snow_char = '*'; // das Zeichen, das als Schneeflocke verwendet wird
var snow_gravity = 0.8; // wie schnell die Schneeflocken fallen
var snow_max_size = 22; // die maximale Schriftgröße einer Schneeflocke
var snow_min_size = 10; // die minimale Schriftgröße einer Schneeflocke

var snow_init_delay = 50; // Verzögerungszeit in Millisekunden, bevor es zu schneien anfängt


// ######################################################################
// HIER ENDET DIE KONFIGURATION. ÄNDERUNGEN IM FOLGENDEN SETZEN JAVSCRIPT-KENNTNISSE VORAUS
// ######################################################################

var snow_init_time = 0;
var snowflakes = new Array();
var snow_area_el = null;

function createSnowflakes()
{
var style = 'position:absolute; top:-' + snow_max_size + 'px; z-index:99;';
for (var i = 0; i <= snow_flake_count; i++)
document.write('<sp' + 'an id="snwflk' + i + '" style="' + style + '">' + snow_char + '</sp' + 'an>');
}

function randInt(range) { return Math.floor(Math.random() * range); }

function initSnow()
{
snow_area_el = document.getElementById(snow_area_id);

// reapeat until we have the snow_area_el
if(!snow_area_el || snow_area_el.offsetWidth <= snow_max_size || snow_area_el.offsetHeight <= snow_max_size) {
// after 5 secs cancel
if(snow_init_time < 5000)
window.setTimeout('initSnow()', 50);

snow_init_time += 50;
return;
}

// offest fix
snow_area_el.style.position = 'relative';

for (var i = 0; i <= snow_flake_count; i++)
{
snowflakes = document.getElementById('snwflk' + i);

snowflakes.size = (randInt(snow_max_size - snow_min_size) + snow_min_size);
snowflakes.posx = -snowflakes.size;
snowflakes.posy = -snowflakes.size;
snowflakes.sink = (snow_gravity * snowflakes.size / snow_min_size);
snowflakes.wobamp = (Math.random() * (snowflakes.size));
snowflakes[i].wob = 0.0;
snowflakes[i].wobspeed = (0.03 + Math.random() / 10.0);

snowflakes[i].style.fontFamily = snow_fonts[randInt(snow_fonts.length)];
snowflakes[i].style.fontSize = snowflakes[i].size + 'px';
snowflakes[i].style.color = snow_colors[randInt(snow_colors.length)];
}

window.setInterval('updateSnow()', 50);
}

function updateSnow()
{
var bl = snow_area_el.offsetLeft;
var bt = snow_area_el.offsetTop;
var bw = snow_area_el.offsetWidth;
var bh = snow_area_el.offsetHeight;
var br = bl + bw;
var bb = bt + bh;

for (var i = 0; i <= snow_flake_count; i++)
{
snowflakes[i].wob += snowflakes[i].wobspeed;
var x = snowflakes[i].posx + (snowflakes[i].wobamp * Math.sin(snowflakes[i].wob));
snowflakes[i].posy += snowflakes[i].sink;

snowflakes[i].style.left = Math.round(x) + 'px';
snowflakes[i].style.top = Math.round(snowflakes[i].posy) + 'px';

var s = snowflakes[i].size;
// check bounds
if (snowflakes[i].posy > (bb - s) || x < bl || x > (br - s))
{
snowflakes[i].posx = bl + s + randInt(bw - (3 * s));

if(snowflakes[i].posy < 0)
snowflakes[i].posy = bt + randInt(bh - 2 * s);
else
snowflakes[i].posy = bt;
}
}
}

// Schnee initialisieren
createSnowflakes();
window.setTimeout('initSnow()', Math.max(50, snow_init_delay));

Die schnee.js online stellen!


Einbau in die Ankündigung (gleich oben nach der Grundscriptsammlung):
Komplett inklusive CSS und Div!

Script:Zeigen

<style type="text/css">#winter {background-color:transparent; border: 1px dashed #ffffff; overflow: hidden; position: relative; width: 95%; text-align:left; margin:auto; padding:15px;}</style><div id="winter"><script type='text/javascript' src='http://DeineSeite.de/scripts/schnee.js?%chats%'></script>

Alles rote kann angepasst werden.
http://DeineSeite.de/scripts/schnee.js muss angepasst werden!

mal ergänzend zum posting von Zischdings
für alle die leiber einer hintergrundfarbe ein hintergrund bild haben wollen sähe der code dann so aus

Script:Zeigen

<style type="text/css">#winter {background-image: url(http://URL des Bildes); border: 1px dashed #ffffff; overflow: hidden; position: relative; width: 95%; text-align:left; margin:auto; padding:15px;}</style><div id="winter"><script type='text/javascript' src='http://URL zur JS Datei></script>

@Zischdings: du kannst diese ergänzung auch gerne in deinen beitrag mit aufnehmen und meinen dann löschen. ist für die user ggf übersichtlicher

Danke BumBumBass, das mach ich doch glatt

Für eine Grafik statt des (Schnee-)Sterns und somit auch andere fallende Objekte, wie Laub, Sonnen, etc. kann auch ein img-Tag eingebunden werden. Siehe post147428.html#p147428

[Berlinmann1]

vielen vielen dank

klappt super

gruß berlinmann1