Arriere-plan qui tourne !

Soyez le premier à donner votre avis sur cette source.

Vue 19 575 fois - Téléchargée 1 089 fois

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 !

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
52
Date d'inscription
jeudi 23 juin 2005
Statut
Membre
Dernière intervention
21 novembre 2005

Super !
J'avais déjà vu ça mais avec mois de code... il y a très très longtemps... j'ai pas enregistré le code !
Sinon c'est bien mais c'est conseillé pour des images basse résolutions ! Car même avec mon processeur AMD 64 4000+ (le tout dernnié quoi !)utilisation du CPU 86% !
8/10
Messages postés
29
Date d'inscription
mardi 26 avril 2005
Statut
Membre
Dernière intervention
17 février 2006

C'est normal, plus que tu met d'effets, plus que c'est lent.
Si t'as des probl. avec ton ordi, je ne te conseillerait pas d'entrer sur des pages de meme !
Messages postés
868
Date d'inscription
dimanche 26 décembre 2004
Statut
Membre
Dernière intervention
26 février 2008
1
Salut,
C'est sympa.
Juste une remarque : ça bouffe de la puissance, mon process oscille entre 99% et 100% (1,5 GHz)
@++
Messages postés
12
Date d'inscription
samedi 9 octobre 2004
Statut
Membre
Dernière intervention
22 mai 2009

J'ai trouvé sur le forum une autre animation reposant sur le même principe activeX
Sais-tu comment obtenir la liste des activesX disponibles dans window xp avec leurs paramètres de règlages
Messages postés
29
Date d'inscription
mardi 26 avril 2005
Statut
Membre
Dernière intervention
17 février 2006

Merci pour vos commentaires.
linkinpar236737, effectivement, ca marche juste sur MSIE
terrible - <OBJECT classid=CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6 id=spinny
style="HEIGHT: 100%; WIDTH: 100%">
...
...
..
</object>
C'est ce qui fait que l'ecran tourne (bien-sur c'est defini dans head aussi. Si tu veut modifier quelque chose la-dedans, c'est la couleur de chaque branche qui tourne. Comme dans , tu peut modifier 0,0,150 par une autre couleur RGB, comme 0,0,250 ce qui donnerait un bleu clair. N'efface pas le "<object> parce que sinon ton ecran ne vas pas tourner il vas rester un ecran normal avec la couleur que t'avait choisis dans "<body bgcolor="
Afficher les 8 commentaires

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.