Sneeuw op een bladzijde van je website laten dwarrelen

"Hoe kan ik sneeuwvlokjes laten dwarrelen over mijn website?" mailt Eric uit buurtcomité Groene rei. We leggen dat hier even in enkele stappen uit...

UPDATE: Helaas (wellicht om veiligheidsredenen) is dit script in de website niet meer te gebruiken!


Stap 1 Met dit stappenplan zorg je voor sneeuw op één (of verschillende) welbepaalde pagina van je website, NIET op alle bladzijden van je website.

Stap 2 Kopieer de (lange) code die je helemaal onderaan deze pagina ziet staan. Zorg dat je begint bij het woordje <script> en eindigt bij het woordje </script>

Stap 3 Ga naar beheer in je website. Kies de pagina waarop je sneeuw wilt zien en maak een nieuw tekstblok.

Stap 4 Klik de code-knop aan.

Stap 5 Plak de code in het tekstblok.

Stap 6 Sla je aanvulling op.

Stap 7 Bewonder urenlang het vallen van de sneeuw op die pagina. 
Extra: de sneeuw stapelt zich onderaan je scherm op.

Quizvraag: Hoe lang duurt het voor je hele scherm met sneeuw gevuld is? Stuur je antwoord naar [email protected]

Extra Als je heel voorzichtig te werk gaat, kun je enkele zaken aanpassen: grootte van de vlokken, snelheid dat ze vallen, enz.
(enkel voor gevorderden en durvers)

Extra 2 Klik terug op de code-knop. nu zie je onderstaande code en de plaats van de 4 dingen waar je kan wijzigen:


Let op dat geen " of ; verdwijnt, anders werkt het hele script mogelijks niet meer...

Voorbeeld: op deze bladzijde vallen er half zoveel vlokken half zo snel als in de originele code hieronder.

Extra 3 (voor gevorderden)
#ffffff hierboven in het script is de kleur wit. Andere kleurcodes kun je hier , hier of hier zoeken. Hoe kleurcodes zijn samengesteld lees je hier.

 

Het te kopiëren script staat hieronder:

<script>
var speed=11; // lager getal voor sneller vallende vlokken
var flakes=100; // aantal vlokken
var colour="#ffffff"; // kleur van de vlokken
var slush=20; // zet op '0' om geen sneeuwslijk te hebben of noteer op welke hoogte de sneeuw verandert in sneeuwslijk
/***************************
* Let It Snow Effect *
*(c) 2004-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* Pas niets aan onder dit blok *
***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh;
window.onload=function() { if (document.getElementById) {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
for (var i=0; i<flakes; i++) {
flks[i]=createDiv(3, 3);
flkx[i]=3*Math.floor(Math.random()*swide/3);
flky[i]=Math.floor(Math.random()*shigh);
fldy[i]=2+Math.floor(Math.random()*4);
flks[i].style.left=flkx[i]+"px";
flks[i].style.top=flky[i]+"px";
b.appendChild(flks[i]);
}
setInterval("let_it_snow()", speed);
}}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
swide-=3;
if (slush) {
if (swide/3>slss.length) for (var i=slss.length; i<swide/3; i++) {
slss[i]=createDiv(3, 3);
slss[i].style.left=3*i+"px";
document.getElementById("bod").appendChild(slss[i]);
slsh[i]=3;
}
for (var i=0; i<swide/3; i++) slss[i].style.top=shigh-slsh[i]+"px";
}
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
function let_it_snow(c) {
var i, x, o=0;
for (i=0; i<flakes; i++) {
flky[i]+=fldy[i];
x=flkx[i]/3;
if (slush) o+=slsh[x];
if (flky[i]>=shigh-(slush?slsh[x]:0)) {
if (slush) {
if (x<swide && slsh[x]>slsh[x+1]+3) x++;
else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
slss[x].style.top=shigh-(slsh[x]+=3)+"px";
slss[x].style.height=slsh[x]+"px";
}
flky[i]=0;
fldy[i]=2+Math.floor(Math.random()*4);
flkx[i]=3*Math.floor(Math.random()*swide/3);
flks[i].style.left=flkx[i]+"px";
}
flks[i].style.top=flky[i]+"px";
}
if (o>flakes*slush) {
for (i=0; i<swide/3; i++) if (slsh[i]>1) slsh[i]--;
set_width();
}
}
</script>

Lees verder: