Sneeuw op je website | Edwin Duinkerken - Freelance webdeveloper en journalist

Added Dec 16, 2008, Under: Alle artikelen

Hoewel er buiten geen sneeuw ligt, kan het natuurlijk wel leuk zijn om het te laten sneeuwen op je website. Dat kun je eenvoudig met een scriptje dat hier aangeboden wordt. Ik heb het script + plaatje + voorbeeldpagina even in een zip-bestand gezet, download hier het Sneeuwpakket.

Sneeuw op je website zetten is heel gemakkelijk:

Download het script + plaatje
Upload beide naar je webruimte. Bij voorkeur in dezelfde map.
Zet deze regel code ergens in je website (tussen de body-tags):
<script src="./snow.js" type="text/javascript"></script>
Klaar! Let is snow, let it snow, let it snow!

Alvast fijne feestdagen allemaal!

Door Edwin Duinkerken

Twitter Facebook

2 comments

McJoost says:

December 16, 2008 at 3:38 pm

Ik zoek eigenlijk nog een sneeuw programmaatje waarbij je ascii tekens als punten en asteriksen kan laten sneeuwen.
Edwin says:

December 16, 2008 at 8:39 pm

Alsjeblieft:

<script> // CREDITS: // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved. // Distributed by <a href="http://www.hypergurl.com" rel="nofollow">http://www.hypergurl.com</a> // Permission given to use the script on webpages 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=3 /////////////////////////////////////////////////////////////////////////// // 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(2*marginbottom-marginbottom-2*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-2*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(""+snowletter+"") } if (browserok) { window.onload=initsnow } </script>

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

2 comments

Reageer op dit artikel