Skript Schneeflocken

Hier könnt ihr über Grafiken diskutieren!

Moderator: moni

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

Skript Schneeflocken

Beitragvon ReyMisterio » Sa 6. Dez 2014, 20:10

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
Moderator
Moderator
Beiträge: 7261
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitragvon moni » Sa 6. Dez 2014, 20:37

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




Top 100

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

Beitragvon ReyMisterio » Sa 6. Dez 2014, 21:49

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: 676
Registriert: Di 29. Jul 2014, 22:56
Mein Vorname: Conny
Wohnort: NRW/OWL
Kontaktdaten:

Re: Skript Schneeflocken

Beitragvon Conny » Sa 6. Dez 2014, 22:53

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: 878
Registriert: Do 20. Okt 2011, 21:40
Mein Vorname: Peter

Re: Skript Schneeflocken

Beitragvon sansiro » So 7. Dez 2014, 10:35

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

Benutzeravatar
moni
Moderator
Moderator
Beiträge: 7261
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitragvon moni » So 7. Dez 2014, 11:22

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




Top 100

Benutzeravatar
Conny
Grosser Webmaster
Grosser Webmaster
Beiträge: 676
Registriert: Di 29. Jul 2014, 22:56
Mein Vorname: Conny
Wohnort: NRW/OWL
Kontaktdaten:

Re: Skript Schneeflocken

Beitragvon Conny » Mo 8. Dez 2014, 00:03

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
Moderator
Moderator
Beiträge: 7261
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitragvon moni » Mo 8. Dez 2014, 13:18

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




Top 100

Benutzeravatar
sansiro
Webmaster Meister
Webmaster Meister
Beiträge: 878
Registriert: Do 20. Okt 2011, 21:40
Mein Vorname: Peter

Re: Skript Schneeflocken

Beitragvon sansiro » Mo 8. Dez 2014, 23:11

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/Schneeflocken/winter.html?_cache=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

Benutzeravatar
moni
Moderator
Moderator
Beiträge: 7261
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Skript Schneeflocken

Beitragvon moni » Di 9. Dez 2014, 21:18

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




Top 100


Zurück zu „Grafiken & Grafikprogramme“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast