1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Effet guirlande (image qui suit la souris,

Effet guirlande (image qui suit la souris,

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 206 fois - Téléchargée 31 fois

Commenter

Contenu du snippet


Source / Exemple : 


Entre <HEAD> et </HEAD>

<script language="JavaScript">
// Nombre d'images dans la guirlande
var nDots = 7;
// Position horizontale de départ de la guirlande
var Xpos = 137;
// Position verticale de départ de la guirlande
var Ypos = 39;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 0.8;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 10;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var elements = new Array();
// fonction principale d'affichage de la guirlande
function init() {
var i = 0;
for (i = 0; i < nDots; i++) {
elements[i] = new element(i);
}
if (!isNetscape) {
}
for (i = 0; i < nDots; i++) {
elements[i].obj.left = elements[i].X;
elements[i].obj.top = elements[i].Y;
}
if (isNetscape) {
startanimate();
} else {
setTimeout("startanimate()", 1000);
   }
}
function element(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.element" + i);
} else {
this.obj = eval("element" + i + ".style");
   }
}
function startanimate() {
setInterval("animate()", 20);
}
function setInitPositions(elements) {
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
elements[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
elements[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
elements[0].X = elements[1].X;
elements[0].Y = elements[1].Y - SEGLEN;
}
function MoveHandler(e) {
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
function springForce(i, j, spring)
{
var dx = (elements[i].X - elements[j].X);
var dy = (elements[i].Y - elements[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
   }
}
function animate() {
var start = 0;
if (followmouse) {
elements[0].X = Xpos;
elements[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-elements[i].dx * RESISTANCE, -elements[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
elements[i].dx += (DELTAT * accel.X);
elements[i].dy += (DELTAT * accel.Y);
if (Math.abs(elements[i].dx) < STOPVEL &&
Math.abs(elements[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
elements[i].dx = 0;
elements[i].dy = 0;
}
elements[i].X += elements[i].dx;
elements[i].Y += elements[i].dy;
var height, width;
if (isNetscape)
{
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (elements[i].Y >=  height - DOTSIZE - 1) {
if (elements[i].dy > 0) {
elements[i].dy = BOUNCE * -elements[i].dy;
}
elements[i].Y = height - DOTSIZE - 1;
}
if (elements[i].X >= width - DOTSIZE) {
if (elements[i].dx > 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = width - DOTSIZE - 1;
}
if (elements[i].X < 0) {
if (elements[i].dx < 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = 0;
}
elements[i].obj.left = elements[i].X;
elements[i].obj.top =  elements[i].Y;
   }
}
</script>

------------------------------------------------------------------------------------------------
Dans BODY:
<p><div id="element0" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; visibility:hidden; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element1" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element2" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element3" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element4" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element5" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <div id="element6" style="position:absolute; left:50px; top:50px; width:20px; height:100px; z-index:1; border-width:1px; border-style:none;">
    <p><img src="images/notes.gif" border="0"> </p>
</div> <script language="JavaScript">
// Lancement de la procédure d'affichage de la guirlande
init();
</script>
 </p>

A voir également

Ajouter un commentaire Commentaires
badak9 Messages postés 2 Date d'inscription dimanche 24 décembre 2006 Statut Membre Dernière intervention 26 décembre 2006
26 déc. 2006 à 08:22
Oui oui merci :-) ca j'ai bien vu que l'url n'était pas valide mais je n'avais pas de joli image de flocon sous la main :-)
J'ai donc utilisé une image de mon logo à la place, ce qui vas aussi bien finalement.

bonnes fêtes
cs_8Tnerolf8 Messages postés 30 Date d'inscription vendredi 25 novembre 2005 Statut Membre Dernière intervention 17 novembre 2009
25 déc. 2006 à 12:06
Joyeux Noël tout le monde

Pour répondre à MyPollux54, oui, il est possible d'intégrer ce script dans du PHP. Il suffit de l'insérer dans un echo et d'échapper soit les guillemets, soit les apostrophes du script.

Quant à Badak9, je suis désolé, mais mon successeur a apparement supprimé le site noel.mjcmermoz.asso.fr. Du coup, les url pointant vers les flocons ne fonctionnent plus tu as à la place une croix rouge. Qu'à cela ne tienne, il te suffit de remplacer les src dans le script par une url valide, et tu pourras voir une guirlande correcte.
badak9 Messages postés 2 Date d'inscription dimanche 24 décembre 2006 Statut Membre Dernière intervention 26 décembre 2006
24 déc. 2006 à 15:16
ou est l'image du flocon?
MyPollux54 Messages postés 1 Date d'inscription mercredi 7 décembre 2005 Statut Membre Dernière intervention 16 décembre 2005
16 déc. 2005 à 23:37
Serait-il possible de transformer ce code pour que l'on puisse l'intégrer à une page en php????
cs_8Tnerolf8 Messages postés 30 Date d'inscription vendredi 25 novembre 2005 Statut Membre Dernière intervention 17 novembre 2009
25 nov. 2005 à 18:00
Bon, ben en utilisant le code ci-dessus, je me suis aperçu que ça ne fonctionnait pas sous moteur Mozilla.

Voici donc ce script débuggé pour que cela marche aussi avec Netscape ou Firefox.

Pour voir un bel exemple de ce dernier, rendez-vous sur noel.mjcmermoz.asso.fr.

-------------------------------------------------------------------------------------------------

<HEAD>

<script language="JavaScript">
// Nombre d'images dans la guirlande
var nDots = 7;
// Position horizontale de départ de la guirlande
var Xpos = 137;
// Position verticale de départ de la guirlande
var Ypos = 39;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 0.8;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 10;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var elements = new Array();
// fonction principale d'affichage de la guirlande
function init() {
var i = 0;
for (i = 0; i < nDots; i++) {
elements[i] = new element(i);
}

for (i = 0; i < nDots; i++) {
document.getElementById("element"+i).style.left = elements[i].X;
document.getElementById("element"+i).style.top = elements[i].Y;
}
setTimeout("startanimate()", 1000);

}
function element(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
}

function startanimate() {
setInterval("animate()", 20);
}

function setInitPositions(elements) {
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
elements[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
elements[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
elements[0].X = elements[1].X;
elements[0].Y = elements[1].Y - SEGLEN;
}

function MoveHandler(e) {
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
function springForce(i, j, spring)
{
var dx = (elements[i].X - elements[j].X);
var dy = (elements[i].Y - elements[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
var start = 0;
if (followmouse) {
elements[0].X = Xpos;
elements[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-elements[i].dx * RESISTANCE, -elements[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
elements[i].dx += (DELTAT * accel.X);
elements[i].dy += (DELTAT * accel.Y);
if (Math.abs(elements[i].dx) < STOPVEL &&
Math.abs(elements[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
elements[i].dx = 0;
elements[i].dy = 0;
}
elements[i].X += elements[i].dx;
elements[i].Y += elements[i].dy;
var height, width;
if (isNetscape)
{
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (elements[i].Y >= height - DOTSIZE - 1) {
if (elements[i].dy > 0) {
elements[i].dy = BOUNCE * -elements[i].dy;
}
elements[i].Y = height - DOTSIZE - 1;
}
if (elements[i].X >= width - DOTSIZE) {
if (elements[i].dx > 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = width - DOTSIZE - 1;
}
if (elements[i].X < 0) {
if (elements[i].dx < 0) {
elements[i].dx = BOUNCE * -elements[i].dx;
}
elements[i].X = 0;
}
document.getElementById("element"+i).style.left = elements[i].X;
document.getElementById("element"+i).style.top = elements[i].Y;
}
}

</script>
</head>











































<script language="JavaScript">
// Lancement de la procédure d'affichage de la guirlande
init();
</script>
Afficher les 6 commentaires
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 (fabiin)