Skript Schneeflocken

Hier könnt ihr über Grafiken diskutieren!

Moderator: goefi-chiangmai

Benutzeravatar
ReyMisterio
Grosser Webmaster
Grosser Webmaster
Beiträge: 530
Registriert: Mo 24. Mai 2010, 14:10
Mein Vorname: Rey
Wohnort: Deutschland
Kontaktdaten:

Skript Schneeflocken

Beitrag von ReyMisterio »

Hallo miteinander,

ich suche ein Schneeflocken-Skript für die Homepage. Habe leider keine passenden gefunden. Vielleicht hat hier jemand eins parat? Wäre super!

Gruß Jens :X
Lachanfälle garantiert: http://suppentee.npage.de :mrgreen: :mrgreen: :mrgreen:
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8331
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitrag von moni »

Habe hier welchen flocken gefunden
http://fabi.me/scripts-codes/javascript-schnee/

und hierist das JS den tust am besten in den Header Bereich ...

Code: Alles auswählen

<script language="javascript" type="text/javascript">
     //
// 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 = 30;

// 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 = 1.8;		// wie schnell die Schneeflocken fallen
var snow_max_size = 50;		// die maximale Schriftgröße einer Schneeflocke
var snow_min_size = 20;		// 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[i] = document.getElementById('snwflk' + i);

		snowflakes[i].size = (randInt(snow_max_size - snow_min_size) + snow_min_size);
		snowflakes[i].posx = -snowflakes[i].size;
		snowflakes[i].posy = -snowflakes[i].size;
		snowflakes[i].sink = (snow_gravity * snowflakes[i].size / snow_min_size);
		snowflakes[i].wobamp = (Math.random() * (snowflakes[i].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));
</script>

Das CSS auch in den Header Bereich

Code: Alles auswählen

<style type="text/css">
<!--

#winter {
	width: 100%;
}
-->
</style>

und das HTML teil an die Text Seite wo die flocken haben möchtest .. und zwar ganz an Anfang das <div id="winter"> Inhalt und zum Schluss </div>
Normale weise muss das klappen , ansonsten melde dich dann ..

Code: Alles auswählen

<div id="winter"></div>
Viele Grüße ...Monika
Benutzeravatar
ReyMisterio
Grosser Webmaster
Grosser Webmaster
Beiträge: 530
Registriert: Mo 24. Mai 2010, 14:10
Mein Vorname: Rey
Wohnort: Deutschland
Kontaktdaten:

Re: Skript Schneeflocken

Beitrag von ReyMisterio »

Es hat geklappt, besten Dank! ;)

Euer Jens
Lachanfälle garantiert: http://suppentee.npage.de :mrgreen: :mrgreen: :mrgreen:
Benutzeravatar
Conny
Grosser Webmaster
Grosser Webmaster
Beiträge: 679
Registriert: Di 29. Jul 2014, 22:56
Mein Vorname: Conny
Wohnort: NRW/OWL
Kontaktdaten:

Re: Skript Schneeflocken

Beitrag von Conny »

Wollte das auch für meine Forum, nur wird da abgeraten weil die Ladezeit einfach zu lang ist.
Wie ist Eure Erfahrung?
Liebe Grüße von Conny

... mit Ihren Doggis: Lucy und Ronja und ihrem Hundesport-Forum
Benutzeravatar
sansiro
Webmaster Meister
Webmaster Meister
Beiträge: 933
Registriert: Do 20. Okt 2011, 21:40
Mein Vorname: Peter

Re: Skript Schneeflocken

Beitrag von sansiro »

Conny hat geschrieben:Wollte das auch für meine Forum, nur wird da abgeraten weil die Ladezeit einfach zu lang ist.
Wie ist Eure Erfahrung?
Das ist korrekt! Bei Usern mit langsamen Rechnern verursacht das nur Verärgerung!

lg sansiro
Bild
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8331
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitrag von moni »

Denke es ist auch Geschmack Sache .. persönlich mag auch so was nicht .
@ jens.. hatte dir das ein wenig unprofessionell beschreiben wie du es Installieren sollst .. du kannst das JS als Java Skript Datei abspeichern ,auf deine HP laden und als externe js Datei Verlinken .. auch das css teil direkt in dein css Datei einfügen ( nehme an das es sich und eigens Design handelt )..wenn nicht da lasse so wie es ist und nur das JS kannst in den header Bereich Verlinken ..
Viele Grüße ...Monika
Benutzeravatar
Conny
Grosser Webmaster
Grosser Webmaster
Beiträge: 679
Registriert: Di 29. Jul 2014, 22:56
Mein Vorname: Conny
Wohnort: NRW/OWL
Kontaktdaten:

Re: Skript Schneeflocken

Beitrag von Conny »

sansiro hat geschrieben: Das ist korrekt! Bei Usern mit langsamen Rechnern verursacht das nur Verärgerung!
:DA Peter, das möchte ich auf keinen Fall.
moni hat geschrieben:Denke es ist auch Geschmack Sache .. persönlich mag auch so was nicht .
Werde es so lassen .... würde auch nicht zu dem Style passen, außer er ist weihnachtlich.
Liebe Grüße von Conny

... mit Ihren Doggis: Lucy und Ronja und ihrem Hundesport-Forum
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8331
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitrag von moni »

Klein Tipp dazu ..man könnte mit den Skript ein oder mehrere Winter Bilder so schmücken ..so wie hier http://fabi.me/misc/winter.html
es zwar ist kein Bild zu sehen nur Farbe man muss nur das Code etwas ändern ....und nach den Winter kann man wieder abschalten :D
Viele Grüße ...Monika
Benutzeravatar
sansiro
Webmaster Meister
Webmaster Meister
Beiträge: 933
Registriert: Do 20. Okt 2011, 21:40
Mein Vorname: Peter

Re: Skript Schneeflocken

Beitrag von sansiro »

moni hat geschrieben:Klein Tipp dazu ..man könnte mit den Skript ein oder mehrere Winter Bilder so schmücken ..so wie hier
Ja, das könnte man :mrgreen: Ich hatte gerade eines zur Hand schau mal hier: http://sansiro-homepageprojekte.de/Schn ... 1418076252

Da man für die "Schneeflocken" im Script keine Bilder benötigt, entfällt die Ladezeit und es geht ohne Verzögerung.Wie schon gesagt, alles Geschmacksache :mrgreen: :mrgreen: :mrgreen:

lg sansiro
Bild
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8331
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitrag von moni »

Das sieht echt herrlich aus , wie in einen Märchen . :)
Viele Grüße ...Monika
Antworten

Zurück zu „Grafiken & Grafikprogramme“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 8 Gäste