Er is geen CSS ondersteuning.
Het water effect is cross-browser en valideert op JSLint en W3C. Je moet wel even goed kijken wat het effect is... Ik houd niet zo van sterk overdreven effecten. Ik laat het water rustigjes "kabbelen". Maar als je wilde bewegingen wilt, is dat ook goed voor mij... Voor het water-effect (wordt ook wel lake-effect genoemd) moet je onderstaande div op jouw pagina plaatsen:
<div id="water"> <img src="http://static.dns5.nl/water.jpg" width="200" height="150" alt="water effect" /> </div>
En onderop de pagina (in de body-sectie) het onderstaande stuk javascript. De variabelen zijn duidelijk omschreven. Probeer alles zo aan te passen dat het een voor jou werkbaar geheel wordt.
<script>
var hetplaatje='http://static.dns5.nl/water.jpg';
var hetid="water";
var breedteplaatje=200;
var hoogteplaatje=150;
var beginpxhoogte=95;
var effectbottom=hoogteplaatje;
var draaieffectom=0;
var schijndoor=100;
var underlay=0;
var overlay=0;
var underlaybreedte=breedteplaatje;
var underlayhoogte=effectbottom-beginpxhoogte;
var golfhoog=8;
var golfbreed=3;
var vertraging=120;
var autostart=1;
var golfjes=effectbottom-beginpxhoogte;
var nummervanid=0;
var chkmz=1;
var resultaat;
var rvfactor;
var rvhoogte;
var rvhoogstetop;
var clibreedteplaatje;
var draaieffectomtop;
var a;
var i;
var m;
if(draaieffectom){rvfactor=golfjes/beginpxhoogte;rvhoogte=hoogteplaatje*rvfactor;rvhoogstetop=beginpxhoogte-golfjes;clibreedteplaatje=breedteplaatje-golfbreed*2;resultaat="<div id='base' style=\"position:absolute; top:0px; left:0px; width:"+breedteplaatje+"px; height:"+beginpxhoogte+"px; clip:rect(0px,"+clibreedteplaatje+"px,"+beginpxhoogte+"px,"+golfbreed+"px); z-index:1;\"><img src='"+hetplaatje+"' width='"+breedteplaatje+"px' height='"+hoogteplaatje+"px'/></div>";if(underlay){resultaat+="<div id='golfslag' style=\"position:absolute; top:"+beginpxhoogte+"px; left:0px; width:"+underlaybreedte+"px; height:"+underlayhoogte+"px; clip:rect(0px,"+clibreedteplaatje+"px,"+golfjes+"px,"+golfbreed+"px); z-index:2;\"><img src='"+underlay+"' width='"+underlaybreedte+"px' height='"+underlayhoogte+"px'/></div>";}
resultaat+="<div id='reflect' style=\"position:absolute; top:"+rvhoogstetop+"px; left:0px; width:"+breedteplaatje+"px; height:"+hoogteplaatje*2+"px; clip:rect(0px,"+clibreedteplaatje+"px,"+hoogteplaatje*2+"px,"+golfbreed+"px); z-index:3; overflow:hidden;\">";for(i=1;i<=golfhoog;i+=1){resultaat+="<div id='golfnum"+i+"' style=\"position:absolute; top:0; left:0; width:"+breedteplaatje+"px; height:"+hoogteplaatje*2+"px; z-index:3;\">";for(a=i;a<=golfjes;a+=golfhoog){draaieffectomtop=golfjes*2-a*2+(1*1);nummervanid+=1;resultaat+="<div id='plaatnum"+nummervanid+"' style=\"position:absolute; top:"+draaieffectomtop+"px; left:0px; width:"+breedteplaatje+"px; height:"+a+"px; clip:rect("+(a-1)+"px,"+breedteplaatje+"px,"+a+"px,0px); z-index:3; overflow:hidden;\"><img src='"+hetplaatje+"' width='"+breedteplaatje+"px' height='"+rvhoogte+"px'></div>";}
resultaat+="</div>";}
if(overlay){resultaat+="<img src=\""+overlay+"\" id='overlay' style=\"position:absolute; top:0px; left:0px; width:"+breedteplaatje+"px; height:"+hoogteplaatje+"px; z-index:10;\"/>";}
resultaat+="</div>";}
if(!draaieffectom){chkmz=0;resultaat="<div id='base' style=\"position:absolute; top:0px; left:0px; width:"+breedteplaatje+"px; height:"+hoogteplaatje+"px; clip:rect(0px,"+breedteplaatje+"px,"+hoogteplaatje+"px,0px); z-index:1;\"><img src='"+hetplaatje+"' width='"+breedteplaatje+"px' height='"+hoogteplaatje+"px'/></div>";resultaat+="<div id='reflect' style=\"position:absolute; top:0px; left:0px; width:"+breedteplaatje+"px; height:"+hoogteplaatje+"px; clip:rect(0px,"+breedteplaatje+"px,"+hoogteplaatje+"px,0px); z-index:3; overflow:hidden;\">";for(i=1;i<=golfhoog;i+=1){resultaat+="<div id='golfnum"+i+"' style=\"position:absolute; top:0; left:0; z-index:3;\">";for(a=i;a<=golfjes;a+=golfhoog){resultaat+="<div style=\"position:absolute; top:0; left:0; width:"+breedteplaatje+"px; height:"+hoogteplaatje+"px; clip:rect("+(beginpxhoogte+(a*1)-1)+"px,"+breedteplaatje+"px,"+(beginpxhoogte+(a*1))+"px,0px); z-index:3; overflow:hidden;\"><img src='"+hetplaatje+"' width='"+breedteplaatje+"px' height='"+hoogteplaatje+"px'/></div>";}
resultaat+="</div>";}
if(overlay){resultaat+="<img src=\""+overlay+"\" id='overlay' style=\"position:absolute; top:0px; left:0px; width:"+breedteplaatje+"px; height:"+hoogteplaatje+"px; z-index:10;\"/>";}
resultaat+="</div>";}
function $(obj){return document.getElementById(obj);}
function doenu(){$(hetid).style.position="absolute";$(hetid).innerHTML=resultaat;}
var tgolf=[];var tgolfmeer=Math.PI*2/(golfhoog-1);var b=1;for(a=1;a<=golfhoog;a++){tgolf[tgolf.length]=Math.sin(tgolfmeer*a)*golfbreed;}
function beginhier(){if(b<=golfhoog){$('golfnum'+b).style.left=Math.ceil(tgolf[b-1])+"px";b+=1;beginhier();}
else{b=1;tgolf=tgolf.slice(1,tgolf.length);tgolf[tgolf.length]=tgolf[0];setTimeout(function(){beginhier();},vertraging);}}
function doestrc(){for(m=1;m<=golfjes;m+=1){$('plaatnum'+m).style.MozOpacity=schijndoor/100;$('plaatnum'+m).style.opacity=schijndoor/100;$('plaatnum'+m).style.filter="alpha(opacity="+schijndoor+")";}}
function start1(){doenu();doestrc();beginhier();}
function start2(){doenu();doestrc();}
function start3(){doenu();beginhier();}
if(autostart&&chkmz){onload=start1;}if(!autostart&&chkmz){onload=start2;}if(autostart&&!chkmz){onload=start3;}
</script>
cache 14-10-2010