FADE IN EFFECT 3 - "FENCE UP"

The new page fades in "through a fence" (for Internet Explorer; counterproductive with Mozilla Firefox). 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. Within the code you can set colours for this effect: change the HEX-Code for the color (here: FF4040) accordingly. Have a try!

<style type="text/css"> 
<!--
.intro{
position:absolute;left:0;top:0;
layer-background-color:FF4040;
background-color:FF4040;
border:0.1px FF4040;}
--></style></p>
<div class="intro" id="i1"> </div>
<div class="intro" id="i2"> </div>
<div class="intro" id="i3"> </div>
<div class="intro" id="i4"> </div>
<div class="intro" id="i5"> </div>
<div class="intro" id="i6"> </div>
<div class="intro" id="i7"> </div>
<div class="intro" id="i8"> </div>
<script
language="JavaScript1.2">
var speed=30
var temp=new Array()
var temp2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
temp[i]=eval("document.i"+i+".clip")
temp2[i]=eval("document.i"+i)
temp[i].width=window.innerWidth/8-0.3
temp[i].height=window.innerHeight
temp2[i].left=(i-1)*temp[i].width}}
else if (document.all){
var clipbottom=document.body.offsetHeight,cliptop=0
for (i=1;i<=8;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth/8
temp[i].height=document.body.offsetHeight
temp[i].left=(i-1)*parseInt(temp[i].width)}}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
temp[i].bottom-=speed
for (i=2;i<=8;i=i+2)
temp[i].top+=speed
if (temp[2].top>window.innerHeight)
clearInterval(stopit)}
else if (document.all){
clipbottom-=speed
for (i=1;i<=8;i=i+2){
temp[i].clip="rect(0 auto+"+clipbottom+" 0)"}
cliptop+=speed
for (i=2;i<=8;i=i+2){
temp[i].clip="rect("+cliptop+" auto auto)"}
if (clipbottom<=0)
clearInterval(stopit)}}
function gogo(){stopit=setInterval("openit()",100)}
gogo()
</script>

And now: enjoy tinkering!

FADE IN EFFECT 3 - "FENCE UP"

This page was last updated on: 22.05.2011