Comment animer le curseur avec une roue ?

 

par meltech1 |

     
Comment animer le curseur avec une roue ?

Le curseur sur votre page Internet, c'est la flèche de la souris qui permet de cliquer sur les liens de votre site Internet. Ce curseur peut être amélioré avec une animation. Dans cet exemple nous allons ajouter une roue multicolore qui tourne autour du curseur. Pour programmer cet article voici comment faire en Javascript.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel Bloc Notes

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet avec Bloc Notes pour en obtenir le code source. Dans ce code source il y a le programme de votre site Internet dans lequel vous pouvez programmer ce qui suit. Pour ce faire veuillez trouver la balise <body>.

2.

Dans la balise <body> veuillez insérer le script qui suit :

<script language="JavaScript">
CoLoUrS=new Array('00FF00','FF00FF','FF0000','CCFFCC'); // ou autres couleurs
var step=0.3,a_StEp=0.05,RunTime=0,currStep=0,Xpos=0,Ypos=0,cntr=70,count_a=0;
var count=0,move=1,Ay=0,Ax=0,dots=16;var x;brwsr=(document.layers)?1:0;
if (brwsr){
for (i=0; i < dots; i++){
document.write('<LAYER NAME="a'+i+'" LEFT=0 TOP=0 BGCOLOR=#3366ff CLIP="0,0,3,3"></LAYER>');
}
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = nsMouse
}
else{
document.write('<div id="ys" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < dots; i++){
document.write('<div id="ieDivs" style="position:absolute;top:0px;left:0px;width:3px;height:3px;background:#3366ff;font-size:3px"></div>');
}
document.write('</div></div>');
function ieMouse(){
Ypos=event.y;
Xpos=event.x;
}
window.document.onmousemove = ieMouse
}
function MouseFollow(){
ay = Math.round(Ay+=(Ypos- Ay)* 4/40);
ax = Math.round(Ax+=(Xpos- Ax)* 4/40);
setTimeout('MouseFollow()',10);
}
function colourStep(){
count+=move;
if (count >= dots) {count=0;count_a+=move}
if (count_a == CoLoUrS.length) count_a=0;
if (brwsr) document.layers["a"+count].bgColor=CoLoUrS[count_a];
else ieDivs[count].style.background=CoLoUrS[count_a];
setTimeout('colourStep()',100)
}
function TwistnSpin(){
if (!brwsr) ys.style.top=document.body.scrollTop;
for (i=0; i < dots; i++)
{
var allLayers=(document.layers)?document.layers["a"+i]:ieDivs[i].style;
allLayers.top=ay+cntr*Math.cos((currStep+i*4)/10.2)*Math.sin(currStep/20);
allLayers.left=ax+cntr*Math.sin((currStep+i*4)/10.2)*Math.cos(1+currStep/20);
}
currStep-=step;
setTimeout("TwistnSpin()",10);
}
function CombineNstart(){
MouseFollow();TwistnSpin();colourStep();
}
window.onload=CombineNstart;
</script>

3.

Pour terminer enregistrez le tout avec Bloc Notes et ouvrez avec IE. Vous remarquez une roue multicolore autour de votre curseur. Cela sert à animer votre site Internet.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on