How to display a snowfall on a website?

Miscellaneous Forums/General Discussion/How to display a snowfall on a website?

Grisu
 #1
Hi everyone!

I'd like to display some basic snowfall on my website.

Does someone know how to do that?

Via Java? Flash? I'm quite a newbie in these fields.
Examples would help a lot.

Thanks,
Grisu

markcw
 #2
you can use javascript.

try: http://javascript.internet.com/image-effects/snow.html

or: http://www.hypergurl.com/snowmaker.html

search google for more:
http://www.google.co.uk/search?hl=en&ie=ISO-8859-1&q=javascript+snow&meta=

Grisu
 #3
Thanks for the links.

My problem is I can't get such a script working on my website:

http://www.dfaweb.de.vu/

It uses frames and a simple java script already.
Each time I try to insert the script nothing happens at all. :(

Could someone point me into the direction where I have to insert this? Is it even possible with frames and other scripts?

markcw
 #4
hi,

seems that hypergurl codebox wasn't working because the formatting was lost. solution was to copy it from the source instead. i copied your "about.htm" code and then added the snow code to it. works fine now.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <title>Drei Fragezeichen Archiv</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"></head>

<body background="buttons/grau.gif" link="red" vlink="#CC0000"
alink="red">

<!-- snow script starts here  ->

<script>
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by <a href="http://www.hypergurl.com" target="_blank">http://www.hypergurl.com</a>
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximal-size of your snowflaxes
var snowmaxsize=22

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
	if (ie5 || opera) {
		marginbottom = document.body.clientHeight
		marginright = document.body.clientWidth
	}
	else if (ns6) {
		marginbottom = window.innerHeight
		marginright = window.innerWidth
	}
	var snowsizerange=snowmaxsize-snowminsize
	for (i=0;i<=snowmax;i++) {
		crds[i] = 0;                      
    	lftrght[i] = Math.random()*15;         
    	x_mv[i] = 0.03 + Math.random()/10;
		snow[i]=document.getElementById("s"+i)
		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
		snow[i].size=randommaker(snowsizerange)+snowminsize
		snow[i].style.fontSize=snow[i].size
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
		snow[i].sink=sinkspeed*snow[i].size/5
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
		snow[i].style.left=snow[i].posx
		snow[i].style.top=snow[i].posy
	}
	movesnow()
}

function movesnow() {
	for (i=0;i<=snowmax;i++) {
		crds[i] += x_mv[i];
		snow[i].posy+=snow[i].sink
		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
		snow[i].style.top=snow[i].posy
		
		if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
			snow[i].posy=0
		}
	}
	var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
	window.onload=initsnow
}
</script>

<!-- snow script ends here  ->

  <table border="0" width="90%" bgcolor="#f2f2f2" bordercolor="white"
  align="center">
    <tr>
        <td width="5" rowspan="4">  </td>
        <td colspan="2"><font size="5" face="Verdana" color=
      "#0099FF"><b>DFA</b></font></td>
        <td width="5" rowspan="4">  </td>
    </tr>

    <tr>
        <td colspan="2">
            <p><font face="Verdana" color="#0080FF"><font color=
        "#000000">Wilkommen auf der Homepage des &quot;Drei Fragezeichen
        Archivs (DFA)&quot;. </font></font><font face="Verdana">Das DFA
        ist eines unter vielen <font color=
        "#FF0000">privaten</font> <font color=
        "#FF0000">Fanprojekten</font> zur Serie die &quot;Die drei
        Fragezeichen (?<font color="#FF0000">?</font><font color=
        "#0000FF">?</font> <font color="#000000">)&quot;, welche in
        Buchform vom Franckh-Kosmos Verlag (heute Kosmos Verlag) seit 1968 in Deutschland
        vertrieben wird. Die urspr&uuml;ngliche Buchreihe wurde 1999 um &quot;Die drei Fragezeichen Kids&quot; erg&auml;nzt.</font></font><font face="Verdana"><br>
</font><font face="Verdana"><br>
<font color="#000000">Eine        begleitende H&ouml;rspielserie wird seit 1978 vom Tonstudio
        EUROPA (heute Sony-BMG Gruppe)
        produziert. Im Oktober&nbsp;2006 stellte EUROPA diese ein und vertreibt nunmehr unter der Marke &quot;DiE DR3i&quot; eine abgekoppelte H&ouml;rspielreihe.</font><br>
</font><font face="Verdana"><br>
Das DFA gibt als <font color=
        "#FF0000">kostenlose</font></font> <font face="Verdana"
        color="red">Software</font> <font face="Verdana">eine
        &Uuml;bersicht zu den bisher ver&ouml;ffentlichten Titeln. Layout und die Bedienung sind dabei m&ouml;glichst
        einfach gehalten. So l&auml;uft das Programm auch auf
        &auml;lteren Rechnern und kann selbst von den
        j&uuml;ngeren Fans problemlos bedient werden.</font>
        <font face="Verdana"><br></font><font face="Verdana"><br>
        Zu den </font><font face="Verdana" color="red">Features</font><font face="Verdana"> des DFA geh&ouml;ren unter
        anderem:</font></p>
        </td>
    </tr>
    <tr>
        <td>    </td>
        <td><font face="Verdana"><img height="10" hspace="0" src=
      "buttons/b.gif" width="10" border="0"> Diverse Informationen
      &uuml;ber Folgen, Autoren und Sprecher der Serien.<br>
      <img height="10" hspace="0" src="buttons/b.gif" width="10"
      border="0"> Bewertung einzelner Folgen sowie
      Durchschnittsdatenbank.<br></font><font face=
      "Verdana"><img height="10" hspace="0" src="buttons/b.gif"
      width="10" border="0"> Umfangreiche
      Statistiken.<br></font><font face="Verdana"><img height="10"
      hspace="0" src="buttons/b.gif" width="10" border=
      "0"> Puzzlespiel mit den Covern der Serien.<br>
      <img height="10" hspace="0" src="buttons/b.gif" width="10"
      border="0"> Einbindung externer Kurztrailer
      im Ogg-Format.</font><font face=
      "Verdana"><br></font><font face="Verdana"><img height="10"
      hspace="0" src="buttons/b.gif" width="10" border="0">
      Ausf&uuml;hrliche Hilfe im PDF-Format.<br></font><font face=
      "Verdana"><br></font></td>
    </tr>

    <tr>
        <td colspan="2" rowspan="2">
<font size="3" face="Verdana">Die Entwicklung des DFA
        ist noch nicht abgeschlossen. Im Moment befindet es sich
        noch in der Betaphase. &Uuml;ber konstruktive Kritik,
        Verbessungsvorschl&auml;ge sowie Bugreports aller Art
        w&uuml;rde ich mich sehr freuen. Benutzt werden kann
        dazu am Besten das</font> <a href=
        "http://www.drei-fragezeichen.de/forum/index.php?showforum=110"
        target="_blank"><font size="3" face="Verdana" color=
        "red">DFA-Forum</font></a><font size="3" face=
        "Verdana">.</font><font face=
      "Verdana"><br></font><font face=
      "Verdana"><br></font>
<font face="Verdana">Viel Spa&szlig; mit dem DFA,
        Stefan</font><font face="Verdana"><br></font><font face="Verdana"><br></font></td>
    </tr>
    <tr>
        <td width="5">  </td>

        <td width="5">  </td>
    </tr>
  </table>
</body>
</html>