Images éclatées qui se regroupent

Commenter

Contenu du snippet

Amusez vous bien :o)

Source / Exemple : 


<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT>
// 12-11-2003 - francktfr@systeme-d.net
// écrit pour http://www.systeme-d.net
var imgs = new Array()
var ImagesDone = 0
var DivX = 6	//	Nombre de divisions en longueur
var DivY = 2	//	Nombre de divisions en hauteur
var MoveSteps = 150	//	Nombre d'étapes pour le déplacement
var Interval = 2000		//	Temps entre deux images (ms)
AddImage("http://winomail.com/images/ban1.gif")
AddImage("http://www.milimel.com/site/bannieres/ban_2.gif")
function AddImage(Source){
	var img = new Image()
	img.src = Source
	imgs.push(img)
}
function Separate(Index){
	var h = imgs[Index].height / DivY
	var w = imgs[Index].width / DivX
	var MinX = -w*2
	var MaxX = document.body.offsetWidth + 2*w
	var MinY = -h*2
	var MaxY = document.body.offsetHeight + 2*h
	Dones = new Array()
	for (y = 0; y < DivY; y++){
		for (x = 0; x < DivX; x++){
			var i = 0
			var j = 0
			var doit = true
			var small = new Image()
			small.src = imgs[Index].src
			small.id = "SmallImg"
			while (doit){
				i = ((MaxX - MinX) * Math.random() + MinX)
				j = ((MaxY - MinY) * Math.random() + MinY)
				if (((i+w)<0 || i>document.body.offsetWidth) || ( (j+h)<0  || j>document.body.offsetHeight)) {doit=false}
			}
			small.style.cssText = "position: absolute; top: "+(j + (((DivY-y)*h)- small.height - Container.offsetTop))+";left:"+(i + (((DivX-x)*w)- small.width - Container.offsetLeft))+"; clip:  rect(" + (y*h) + ", " + ((x+1)*w) + ", " + ((y+1)*h) + ", " + (x*w) + ")"
			Container.insertAdjacentElement("afterBegin", small)
		}
	}
	ImagesDone = 0
	//WaitImages(Index)
	for (i=0; i<SmallImg.length; i++){setTimeout("Regroup("+Index+","+i+",1)",50)}
}
function Clear(Index){
	if (typeof(BigImg) != "undefined"){Container.removeChild(BigImg)}
	SmallImg[0].style.zIndex = 10
	SmallImg[0].style.cssText = ""
	SmallImg[0].id = "BigImg"
	var nb = SmallImg.length
	for (i=0; i<nb; i++){if (typeof(SmallImg[0]) != "undefined"){Container.removeChild(SmallImg[0])}}
	BigImg.style.zIndex = -1
	Index >= (imgs.length-1) ?  Index=0 : Index ++
	setTimeout("Separate("+Index+")",Interval)
}
function Regroup(id, nb, Step){
	var img = SmallImg[nb]
	var sx = Math.round(img.offsetLeft/(MoveSteps-Step))
	var sy = Math.round(img.offsetTop/(MoveSteps-Step))
	if (Step >= MoveSteps)
		{
			img.left = 0
			img.top = 0
			ImagesDone++
			if (ImagesDone == (DivX*DivY)){setTimeout("Clear("+id+")",10)}
			return(0)
		}
		else
		{	
			Step ++
			img.style.top = img.offsetTop - sy
			img.style.left = img.offsetLeft - sx
			setTimeout("Regroup("+id+","+nb+","+Step+")",10)
		}
}
</SCRIPT>
</HEAD>
<BODY SCROLL="no" onload="Separate(0)">
<DIV ID=Container STYLE="border: 1 solid black; position: absolute; top: 50; left: 150; width: 470; height: 62;"></DIV>
</BODY>
</HTML>

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 (francktfr)