How to display a snowfall on a website?

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

The forum is locked. These are the original blitzbasic.com forums, kept so they can still be read. No new topics, replies or edits can be made here. To join in, head over to the Blitz3D+ forums.

markcw
 #1
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>