Arriere-plan qui tourne !

Télécharger le projet
Commenter

Description

Superbe script qui fait tourner un arrière-plan dans le sens des aiguilles d'une montre !
On peut configurer quelques variables dans le script :

- la vitesse de rotation (plus élevé égal plus vite) dans dspeed=x.
- Avec un chiffre négatif, on inverse le sens de rotation.
- vous pouvez jouer avec la valeur de dspin=x. Vous obtiendrez alors
- une rotation dans l'espace.
- la premiere couleur de la page est deternimée dans la balise body (ici #000080)
- la seconde couleur de l'effet , ici un bleu plus clair, en notation fonctionnelle rgb (soit 3 nombres entiers compris entre 0 et 255) dans tous les SetFillColor(0,0,150). Donc ceux qui veulent changer de couleur, vous le pouvez ici.

Source / Exemple : 


<html>
<head>
<SCRIPT>
// Script par Glork !
// La vitesse de rotation (+ = +vite)
// -x égal sens inverse des aiguilles
dspeed=1;
// Autre valeur égal rotation 3D
dspin=0;
////////////////////////////////////////////////
drev="";
ddirec="up"
drun="no"
dflip="left"

function spinit() {
	spinny.rotate(0,dspin,drev + dspeed);
	window.setTimeout("spinit()", 1, "JavaScript");
}

function run() {
	if (ddirec=="up") {
		dspeed++
		if (dspeed == 10) { ddirec="down" }
	}
	else {
		dspeed--
		if (dspeed == 1) { ddirec="up" }
	}
	var runtimer = setTimeout('run()',100);
}

function chspeed(nspeed) {
	if (drun == "no") { dspeed=nspeed }
}

function spin() {
	if (dspin == "0") { dspin = "5" }
	else { dspin = "0" }
}

function reverse() {
	if (drev == "") { drev = "-" }
	else { drev = "" }
}

function runspeed() {
	if (drun == "yes") { drun = "no"; clearTimeout('runtimer'); }
	else { drun = "yes"; var runtimer = setTimeout('run()',100); }
}

function flipper() {
	if (dflip == "left") {
		layout.style.filter = 'fliph(enabled=1)';
		dflip="right";
		layouttext.style.left = "62%";
		}
	else { layout.style.filter = 'fliph(enabled=0)'; dflip="left"; layouttext.style.left = "1%";  }
}
</SCRIPT>
<title> ma page... </title>
</head>
<BODY text="#FFFFFF" bgcolor="#000080" link="#FFFFFF" vlink="#FFFFFF" alink="#FF0000" leftMargin="0"  topMargin="0" marginleft="0" margintop="0" onload=spinit()>
<SCRIPT>
document.write("<div style='position: absolute; top: 0; left: 0; HEIGHT:100%; WIDTH:100%;'>");
</SCRIPT>
<OBJECT classid=CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6 id=spinny 
style="HEIGHT: 100%; WIDTH: 100%">
<PARAM NAME="Line0001" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,150)">
<PARAM NAME="Line0003" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0004" VALUE="Pie(-725,-725,1450,1450,0,30,342)">
<PARAM NAME="Line0005" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0006" VALUE="Pie(-725,-725,1450,1450,0,15,18)">
<PARAM NAME="Line0007" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0008" VALUE="Pie(-725,-725,1450,1450,0,5,54)">
<PARAM NAME="Line0009" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0010" VALUE="Pie(-725,-725,1450,1450,0,35,95)">
<PARAM NAME="Line0011" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0012" VALUE="Pie(-725,-725,1450,1450,0,20,130)">
<PARAM NAME="Line0013" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0014" VALUE="Pie(-725,-725,1450,1450,0,3,140)">
<PARAM NAME="Line0015" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0016" VALUE="Pie(-725,-725,1450,1450,0,30,180)">
<PARAM NAME="Line0017" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0018" VALUE="Pie(-725,-725,1450,1450,0,45,234)">
<PARAM NAME="Line0019" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0020" VALUE="Pie(-725,-725,1450,1450,0,20,270)">
<PARAM NAME="Line0021" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0022" VALUE="Pie(-725,-725,1450,1450,0,10,306)">
</OBJECT>
<DIV id=layout style="HEIGHT: 100%; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 100%">
Votre page ici !
</DIV>
</body>
</html>

Conclusion :


Malheureusement ca marche que sur IE :(
Si vous avez des commentaires, n'hesitez pas !
Télécharger le projet

Codes Sources

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