FADE IN EFFECT 6 - "OPEN GATE"

The new page fades in "through a gate" (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. In this code you can set the colours for this effect by changing the HEX-Code (here: 9400D3). Have a try!

<style type="text/css"> 
<!--
.intro{
position:absolute;left:0;top:0;
layer-background-color:9400D3;
background-color:9400D3;
border:0.1px 9400D3;}
--></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=40
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
temp[i].height=window.innerHeight/8
temp2[i].top=(i-1)*temp[i].height}}
else if (document.all){
var clipright=document.body.clientWidth,clipleft=0
for (i=1;i<=8;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth
temp[i].height=document.body.offsetHeight/8
temp[i].top=(i-1)*parseInt(temp[i].height)}}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
temp[i].right-=speed
for (i=2;i<=8;i=i+2)
temp[i].left+=speed
if (temp[2].left>window.innerWidth)
clearInterval(stopit)}
else if (document.all){
clipright-=speed
for (i=1;i<=8;i=i+2){
temp[i].clip="rect(0 "+clipright+" auto 0)"}
clipleft+=speed
for (i=2;i<=8;i=i+2){
temp[i].clip="rect(0 auto auto "+clipleft+")"}
if (clipright<=0)
clearInterval(stopit)}}
function gogo(){stopit=setInterval("openit()",100)}
gogo()
</script>

And now: enjoy tinkering!

FADE IN EFFECT 6 - "OPEN GATE"

This page was last updated on: 22.05.2011