FADE IN EFFECT 2 - "CLEARED PUZZLE"

The new page is being revealed piece by piece (for Internet Explorer). Please see another example for this effect (on our homepage):

Please copy the following code by pushing the below button and paste the copied code into the very beginning of the source code of your own homepage. You can set colours for this effect within the code: change the HEX-Code for color (here: 0000CD) accordingly. Have a try!

<style type="text/css">
    <!--
.intro{
position:absolute;left:0;top:0;
layer-background-color:0000CD;
background-color:0000CD;
border:0.1px 0000CD;}
--></style></p>
    <div class="intro" id="p1"> </div>
    <div class="intro" id="p2"> </div>
    <div class="intro" id="p3"> </div>
    <div class="intro" id="p4"> </div>
    <div class="intro" id="p5"> </div>
    <div class="intro" id="p6"> </div>
    <div class="intro" id="p7"> </div>
    <div class="intro" id="p8"> </div>
    <div class="intro" id="p9"> </div>
    <div class="intro" id="p10"> </div>
    <div class="intro" id="p11"> </div>
    <div class="intro" id="p12"> </div>
    <div class="intro" id="p13"> </div>
    <div class="intro" id="p14"> </div>
    <div class="intro" id="p15"> </div>
    <div class="intro" id="p16"> </div>
    <div class="intro" id="p17"> </div>
    <div class="intro" id="p18"> </div>
    <div class="intro" id="p19"> </div>
    <div class="intro" id="p20"> </div>
    <div class="intro" id="p21"> </div>
    <div class="intro" id="p22"> </div>
    <div class="intro" id="p23"> </div>
    <div class="intro" id="p24"> </div>
    <div class="intro" id="p25"> </div>
    <script>
var espeed=100
var counter=1
var temp=new Array()
var temp2=new Array()
////////Code for Netscape NS 4+////
if (document.layers){
for (i=1;i<=25;i++){
temp[i]=eval("document.p"+i+".clip")
temp2[i]=eval("document.p"+i)
temp[i].width=window.innerWidth/5
temp[i].height=window.innerHeight/5
}
for (i=1;i<=5;i++)
temp2[i].left=(i-1)*temp[i].width
for (i=6;i<=10;i++){
temp2[i].left=(i-6)*temp[i].width
temp2[i].top=temp[i].height
}
for (i=11;i<=15;i++){
temp2[i].left=(i-11)*temp[i].width
temp2[i].top=2*temp[i].height
}
for (i=16;i<=20;i++){
temp2[i].left=(i-16)*temp[i].width
temp2[i].top=3*temp[i].height
}
for (i=21;i<=25;i++){
temp2[i].left=(i-21)*temp[i].width
temp2[i].top=4*temp[i].height
}
}
function erasecontainerns(){
window.scrollTo(0,0)
var whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
if (temp2[whichcontainer].visibility!="hide")
temp2[whichcontainer].visibility="hide"
else{
while (temp2[whichcontainer].visibility=="hide"){
whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
}
temp2[whichcontainer].visibility="hide"
}
if (counter==25)
clearInterval(beginerase)
counter++
espeed-=10
}
////////End code for NS 4+////////
///////////Code for IE 4+/////////
if (document.all){
var containerwidth=parseInt(document.body.clientWidth/5)
var containerheight=parseInt(document.body.offsetHeight/5)
for (i=1;i<=25;i++){
temp[i]=eval("document.all.p"+i+".style")
temp[i].width=containerwidth
temp[i].height=containerheight
}
for (i=1;i<=5;i++)
temp[i].left=(i-1)*containerwidth
for (i=6;i<=10;i++){
temp[i].left=(i-6)*containerwidth
temp[i].top=containerheight
}
for (i=11;i<=15;i++){
temp[i].left=(i-11)*containerwidth
temp[i].top=2*containerheight
}
for (i=16;i<=20;i++){
temp[i].left=(i-16)*containerwidth
temp[i].top=3*containerheight
}
for (i=21;i<=25;i++){
temp[i].left=(i-21)*containerwidth
temp[i].top=4*containerheight
}
}
function erasecontainerie(){
var whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
if (temp[whichcontainer].visibility!="hidden")
temp[whichcontainer].visibility="hidden"
else{
while (temp[whichcontainer].visibility=="hidden"){
whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
}
temp[whichcontainer].visibility="hidden"
}
if (counter==25){
clearInterval(beginerase)
clearInterval(keeptop)
}
counter++
espeed-=10
}
/////////End IE 4+ code////////
if (document.layers)
beginerase=setInterval("erasecontainerns()",espeed)
else if (document.all){
beginerase=setInterval("erasecontainerie()",espeed)
keeptop=setInterval("window.scrollTo(0.0)",100)
}
</script>

And now: enjoy tinkering!

FADE IN EFFECT 2 - "CLEARED PUZZLE"

This page was last updated on: 22.05.2011