11540 sujets

JavaScript, DOM et API Web HTML5

Animation curseur

Bonjour,

D'après mes investigations dans le code-source du site mentionné, il s'agit d'une animation réalisée en Flash.

Cordialement
oui merci mais je ne trouve pas de tuto ou de script pouvant m'expliquer comment faire, je suis débutante sur flash donc bon... help!!
Salut !

Sans flash il est tout a fait possible de faire la même chose en javascript, via la balise Canvas.
Bonjour,

D'accord, mais l'élément canvas n'est pas implémenté dans Internet Explorer.

Cordialement
Une image mieux adaptée pourrait peut-être permettre d'obtenir un effet comparable...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor,  www.pspad.com">
 
<title>Untitled</title>
<style type="text/css">
body{font:Garamond;text-align:center;}
h1{margin:13px;}
.blt{display:block;margin:0px;border:0px;position:absolute;height:11px;width:11px;}
</style>
<script type="text/javascript">
function $(k){return document.getElementById(k)}
  // fixed time step,no relation to real time
var dlT=.01,lnG=10,rpK=10.3,msS=1,yGr=10,ksV=10,stV=0.1,stA=0.1,imS=11,krB=0.80;
sri="data:image/gif;base64,R0lGODlhCwALAKIAAOjo6Pj3+qKh5WFT8k5NhiMN4BEHrgIBZCH5BAEAAAAALAAAAAALAAsAAAM0CBoc+iCIQYVbouhihpPFMHGHEA3haBwEg27G2gaDwcUH6wjxmpcLwi/XekgISAtkwYAkAAA7";
var nLm=7,lum=new Array(),Sxx=Syy=0,chn='<img id="lm0" class="blt" style="visibility:hidden" src="'+sri+'">';
for (var k=1;k<=nLm;k++) chn+='<img id="lm'+k+'" class="blt" src="'+sri+'">';
document.write(chn);
window.onload=iniGui;
function iniGui(){var k;
	for(k=0;k<=nLm;k++) lum[k]=new DefLum(k);
	document.onmousemove=mouseEventGui;
	setInterval("animGui()",20);
}
function DefLum(k){
	this.obj=$('lm'+k);this.x=0;this.y=0;this.dx=0;this.dy=0;
}
function mouseEventGui(e) {var e=e?e:window.event;
		Sxx=e.clientX+$('lm0').parentNode.scrollLeft;
		Syy=e.clientY+$('lm0').parentNode.scrollTop;
}
function animGui(){var st=0;
   lum[0].x=Sxx;
   lum[0].y=Syy;
   var d=document,h,l;
	if (typeof(window.innerWidth)=='number') {l=window.innerWidth;h=window.innerHeight;}
	else if (d.documentElement && d.documentElement.clientWidth) {l=d.documentElement.clientWidth;
		h=d.documentElement.clientHeight;}
	else if (d.body && d.body.clientWidth) {l=d.body.clientWidth;h=d.body.clientHeight;}
	for (k=1;k<=nLm;k++){
		var rpl=new VcT(0,0);
      if (0<k) rplFrc(k-1,k,rpl);
      if (k<nLm) rplFrc(k+1,k,rpl);
      // resisitance de l'air
		var frT=new VcT(-lum[k].dx*ksV,-lum[k].dy*ksV);
      // accélération
      var FsM=new VcT((rpl.x+frT.x)/msS,(rpl.y+frT.y)/msS+yGr);
      // vitesse
      lum[k].dx+=(dlT*FsM.x);
      lum[k].dy+=(dlT*FsM.y);
      // arrêt petits mouvements
      if (Math.abs(lum[k].dx)<stV &&
      	Math.abs(lum[k].dy)<stV &&
         Math.abs(FsM.x)<stA &&
         Math.abs(FsM.y)<stA){lum[k].dx=0;lum[k].dy=0;}
      // nouvelle position
      lum[k].x+=lum[k].dx;
		lum[k].y+=lum[k].dy;
		// rebonds au sol et à droite (pour éviter le scrolling)
      if (lum[k].y>=h-imS-1){if (lum[k].dy>0)lum[k].dy=krB*(-lum[k].dy);
            lum[k].y=h-imS-1;}
      if (lum[k].x>=l-imS-1){if (lum[k].dx>0)lum[k].dx=krB*(-lum[k].dx);
            lum[k].x=l-imS-1;}
   	// Déplacements
		lum[k].obj.style.left=lum[k].x+'px';
   	lum[k].obj.style.top=lum[k].y+'px';}
}
function VcT(x,y){this.x=x;this.y=y;}
function rplFrc(k,j,r){
    var dx=(lum[k].x-lum[j].x);
    var dy=(lum[k].y-lum[j].y);
    var sq=Math.sqrt(dx*dx+dy*dy);
    if (lnG<sq){var rpF=rpK*(sq-lnG);r.x+=(dx/sq)*rpF;r.y+=(dy/sq)*rpF;}
}
</script>
</head>
<body>
<h1>Guirlande</h1>
</body>
</html>
Attention l'image est incluse dans le code ! Ceci ne fonctionne sous cette forme qu'avec IE 8 (et non avec les versions antérieures) !
Sujet clos
Aller à