Effet guirlande (image qui suit la souris,

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

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)