"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>