Une jolie intro ;-)

Commenter

Contenu du snippet

Des lettres et encore des lettres...

Source / Exemple : 


Dans le head :
<style>
.clDivs{position:absolute; 
	width:30; 
	height:30; 
	left:0; 
	font-size:80px; 
	font-weight:bold; 
	font-family:arial,helvetica; 
	color:#000080; 
	visibility:hidden}
</style>
<script>
// Copyright Thomas Brattli at www.bratta.com
// Le nombre de lettres.
numberOfLetters=12 
// La position verticale des lettres (par rapport au centre).
ypos=-80 
// La position horizontale des lettres (par rapport au centre).
// La patience et la persévérance est de rigueur ici. Lorsque vous
// changez la taille ou la police, il vous faudra tout modifier...
xpos=new Array()
xpos[0]=-300
xpos[1]=-245
xpos[2]=-200
xpos[3]=-165
xpos[4]=-140
xpos[5]=-85
xpos[6]=-50
xpos[7]=40
xpos[8]=100
xpos[9]=150
xpos[10]=180
xpos[11]=250

// Pour simplifier votre travail, l'auteur a prévu une variable (testing)
// qui en position 1, affiche les lettres sans faire l'animation.
testing=0

// Trois animations sont possibles.
// Position 1,2 ou 3, 4 pour au hasard. 
animation=3

// La vitesse de l'animation.
aspeed=10 

// L'adresse de la page à afficher après l'intro.
newurl="trans19bis.html"

///////////////////////////////////////////
//Default browsercheck, added to all scripts!
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()

function makeObj(obj,speed,xmove,ymove,works){
	this.el=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;	
  	this.css=bw.dom || bw.ie4?this.el.style:bw.ns4?this.el:0;
	this.moveIt=b_moveIt;
}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

var posArray,oZdivs;
function introInit(){
	pageXcenter=bw.ns4 ||bw.ns5?innerWidth/2:document.body.offsetWidth/2
	pageYcenter=bw.ns4||bw.ns5?innerHeight/2:document.body.offsetHeight/2
	oZdivs=new Array()
	for(i=0;i<numberOfLetters;i++){
		oZdivs[i]=new makeObj('div'+i)
		oZdivs[i].moveIt(-200,0)
		oZdivs[i].css.visibility='visible'
	}
	if(animation==4) animation=Math.round(Math.random()*2)+1
	if(!testing) eval('anim'+animation+'(0)')
	else testIt()
}
function testIt(){
	for(i=0;i<oZdivs.length;i++){
    	oZdivs[i].moveIt((pageXcenter+xpos[i]),(pageYcenter+ypos))
	}	
}

// Intro 1
xPath1=new Array(-277,-271,-264,-255,-245,-234,-223,-210,-196,-181,-161,-134,-98,-52,1,53,98,131,151,156,147,124,92,59,0)
yPath1=new Array(-240,-206,-162,-114,-64,-16,29,71,112,151,187,217,241,255,260,254,239,213,179,143,108,77,51,30,0)
function anim1(num,test){
	if(num<oZdivs.length){
		st=test?test:0;
		animX(num,'xPath1','yPath1',aspeed,st,'anim1('+(num+1)+','+st+')')
	}else endanim(0)
}
// Intro 2
xPath2=new Array(-285,-270,-255,-240,-225,-210,-195,-180,-165,-150,-135,-120,-105,-90,-75,-60,-45,-30,-15,0)
yPath2=new Array(-353,-344,-335,-324,-312,-299,-285,-270,-254,-236,-218,-198,-177,-155,-132,-108,-83,-56,-29,0)
function anim2(num){
	if(num<oZdivs.length){
		animX(num,'xPath2','yPath2',aspeed,0,'anim2('+(num+1)+')')
	}else endanim(0)
}
// Intro 3
xPath3=new Array(0,-2,-6,-13,-23,-36,-50,-66,-83,-100,-117,-134,-150,-164,-177,-187,-194,-198,-200,-198,-194,-187,-177,-164,-150,-134,-117,-100,-83,-66,-50,-36,-23,-13,-6,-2,0)
yPath3=new Array(0,-17,-34,-50,-64,-77,-87,-94,-98,-100,-98,-94,-87,-77,-64,-50,-34,-17,0,17,34,50,64,77,87,94,98,100,98,94,87,77,64,50,34,17,0)
function anim3(num){
	if(num<oZdivs.length){
		animX(num,'xPath3','yPath3',aspeed,0,'anim3('+(num+1)+')')
	}else endanim(0)
}

// Animation 
function animX(divnum,arrayX,arrayY,speed,num,fn){
	arrayXr = new Array(); arrayYr = new Array()
	arrayXr = eval(arrayX); arrayYr = eval(arrayY)
	arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'"
	if(num<arrayXr.length){
    	oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),arrayYr[num]+(pageYcenter+ypos))
		num++;
		setTimeout("animX("+divnum+","+arrayX+","+arrayY+","+speed+","+num+",'"+fn+"')",speed)
	}else eval(fn)
}
// Fin de l'animation
function endanim(num){
	if(num<oZdivs.length){
		oZdivs[num].css.visibility='hidden' //Hiding divs
		num++
		setTimeout("endanim("+num+")",300)
	}else{
		location.href=newurl
	}
}

// Lancement de l'intro
onload=introInit;
</script>

Juste après le BODY
<div id="div0" class="clDivs">S</div>
<div id="div1" class="clDivs">c</div>
<div id="div2" class="clDivs">r</div>
<div id="div3" class="clDivs">i</div>
<div id="div4" class="clDivs">p</div>
<div id="div5" class="clDivs">t</div>
<div id="div6" class="clDivs">s</div>
<div id="div7" class="clDivs">D</div>
<div id="div8" class="clDivs">h</div>
<div id="div9" class="clDivs">t</div>
<div id="div10" class="clDivs">m</div>
<div id="div11" class="clDivs">l</div>

Conclusion :


Amusez-vous bien ! :-)

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Arnotic)