tutoriais

jogos

Códigos/Cheats

Galerias

fóruns

TUTORIAIS DE DHTML

Uma abertura de página em mosaico.

Uma página que aparece progressivamente debaixo de mosaicos de cor.

Demo : Fazer um "refresh" para rever o efeito.

1. Inserir entre os tags <HEAD>...</HEAD>:

<style>
DIV.clC{
position:absolute; 
background-color:#000088; 
layer-background-color:#000088; 
top:0; left:0; 
z-index:500; 
width:100%; height:100%}
</style>

<script>
// Thomas Brattli 
// A quantidade de mosaicos(deve ser divisivel pelo número de colunas)
numbox=56
// A quantidade de colunas
columns=7
// O efeito (de 0 até 3)
cliptype=3 
// A velocidade do movimento
clipspeed=5
// O tempo de pausa antes do efeito
waitbeforeshowing=1000 
///////////////////////////////////////////////////////////////
function checkBrowser(){
	this.ver=navigator.appVersion
	this.dom=document.getElementById?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
	this.ie4=(document.all && !this.dom)?1:0;
	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
	return this
}
bw=new checkBrowser()
cliptp=new Array('0,0,0,0','0,page.x2/columns,0,page.x2/columns','oC.clipy,page.x2/columns,oC.clipy,page.x2/columns','oC.clipy/2,oC.clipx/2,oC.clipy/2,oC.clipx/2')

function transInit(){
	page=new makePageCoords()
	oC=new Array(); 
	oC.clipx=parseInt(page.x2/columns)
	oC.clipy=parseInt((page.y2/numbox)*columns)
	oC.row=numbox/columns
	for(i=0;i<numbox;i++){
	oC[i]=new makeObj('divC'+i)
	if(bw.ie4 || bw.ie5){oC[i].css.width=oC.clipx; oC[i].css.height=oC.clipy;}
	oC[i].clipTo(0,oC.clipx,oC.clipy,0)
	for(j=1;j<=columns;j++){ //Placing boxes
	if(i<oC.row*j){oC[i].moveIt(oC.clipx*(j-1),oC.clipy*(i-oC.row*(j-1))); break;}
	}
	}
	setTimeout("unClip()",waitbeforeshowing)
}

function unClip(){
	str=""
	for(i=1;i<oC.length;i++){
	str=str+'oC['+i+'].clipTo(tcurr,rcurr,bcurr,lcurr);'
	}
	eval("oC[0].clipIt("+cliptp[cliptype]+","+clipspeed+",'','"+str+"')")
}

var cliptim=0;
function makePageCoords(){
this.x=0;this.x2=(bw.ns4 || bw.ns5)?innerWidth:document.body.offsetWidth-19;
this.y=0;this.y2=(bw.ns4 || bw.ns5)?innerHeight:document.body.offsetHeight-5;
this.x50=this.x2/2;	this.y50=this.y2/2;	this.x10=(this.x2*10)/100-5;this.y10=(this.y2*10)/100-5
this.x15=(this.x2*15)/100-5;this.y15=(this.y2*15)/100-5; return this;}
function makeObj(obj,nest){nest=(!nest) ? '':'document.'+nest+'.'	
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;		
this.clipIt=b_clipIt; this.clip=b_clip; this.clipactive=false;this.clipTo=b_clipTo;	this.moveIt=b_moveIt;
this.obj = obj + "Object"; 	eval(this.obj + "=this"); return this}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_clipTo(t,r,b,l){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{this.css.clip="rect("+t+","+r+","+b+","+l+")";}}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn,wh){
if(!fn) fn=null; if(!wh) wh=null; var clipval=new Array()
if(bw.dom || bw.ie4) {clipval=this.css.clip; clipval=clipval.slice(5,clipval.length-1);
clipval=clipval.split(' '); for(var i=0;i<4;i++){clipval[i]=parseInt(clipval[i])}
}else{clipval[0]=this.css.clip.top; clipval[1]=this.css.clip.right
clipval[2]=this.css.clip.bottom; clipval[3]=this.css.clip.left}
totantstep=Math.max(Math.max(Math.abs((tstop-clipval[0])/step),Math.abs((rstop-clipval[1])/step)),
Math.max(Math.abs((bstop-clipval[2])/step),Math.abs((lstop-clipval[3])/step)))
if(!this.clipactive)this.clip(clipval[0],clipval[1],clipval[2],clipval[3],(tstop-clipval[0])/totantstep,
(rstop-clipval[1])/totantstep,(bstop-clipval[2])/totantstep,
(lstop-clipval[3])/totantstep,totantstep,0, fn,wh)}
function b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep,lperstep,totantstep,antstep,fn,wh){
tcurr=tcurr+tperstep; rcurr=rcurr+rperstep; bcurr=bcurr+bperstep; lcurr=lcurr+lperstep
this.clipTo(tcurr,rcurr,bcurr,lcurr); eval(wh); if(antstep<totantstep){this.clipactive=true;antstep++
cliptim=setTimeout(this.obj+".clip("+tcurr+","+rcurr+","+bcurr+","+lcurr+","+tperstep+","
+rperstep+","+bperstep+","+lperstep+","+totantstep+","+antstep+",'"+fn+"','"+wh+"')",50)	
}else{this.clipactive=false; eval(fn)}}

onload=transInit;

if(bw.bw){
for(i=1;i<numbox;i++){
document.write('<div id="divC'+i+'" class="clC"></div>')
}
}
</script>

Pode configurar algumas variáveis:

A cor
background-color:#000088;
layer-background-color:#000088;
A quantidade de mosaicos(deve ser divisível pelo número de colunas)
numbox=56
A quantidade de colunas
columns=7
O efeito (de 0 até 3)
cliptype=3
A velocidade do movimento
clipspeed=5
O tempo de pausa antes do efeito
waitbeforeshowing=1000

2. Inserir entre os tags <BODY>...<BODY>:

ANÚNCIOS

Tutoriais | Fóruns de Discussão | Notícias | Jogos | Dicas | Flash | Downloads | Livros
Gifs Animados | Loja Online | Publicitar no Truques e Dicas | Contactos