Bonjour à toutes et à tous,
voici quelques animations que l'on peut faire en Javascript (pas en Jquery) !
Il y a ce que tu recherches !
Voici le HTML :
<!doctype html>
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Animation</title>
<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->
<script src="Script.js" type="text/javascript"></script>
<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Animation DHTML !</h1>
<div id="mess"></div>
<div id="bloc"></div>
<div id="bulle1">Information sur un texte !</div>
<img id="bulle2" src="Images/undercon.gif" />
<!-- =============================== -->
<!-- balise concernant le JavaScript -->
<!-- =============================== -->
<img id="mouse" src="Images/Arrow.gif" width="50" height="38" alt="" border="0" />
<marquee id="texte">un texte qui défile en permanence dans cette fenêtre !</marquee>
<div class="vert">Premier message !</div>
<div class="vert">Deuxième message !</div>
<div class="vert">Troisième message !</div>
<div class="vert">Quatrième message !</div>
<div class="vert">Cinquième message !</div>
<div class="vert">Sixième message !</div>
<div class="vert">Septième message !</div>
<div class="vert">Huitième message !</div>
<div class="vert">Neuvième message !</div>
<div class="vert">Dixième message !</div>
<div id="infobulle">bla bla</div>
</body>
</html>
Voici le CSS :
body {
background-color : lightyellow;
}
h1 {
margin : 0 auto 50px auto;
text-align : center;
width : 400px;
background-color : lightblue;
}
#mess {
margin : 0 auto 50px auto;
background-color : yellow;
width : 300px;
}
#bloc {
margin : 0 auto 50px auto;
background-color : yellow;
width : 300px;
text-align : center;
}
#bulle1 {
background-color : lightpink;
width : 160px;
cursor : pointer;
}
#bulle2 {
cursor : pointer;
}
/*=========================================*/
/* Balise concernant le JavaScript */
/*=========================================*/
#mouse {
position : absolute;
left : -50px;
top : -50px;
}
#texte {
position : absolute;
width : 120px;
border : 1px solid black;
font-size : 14px;
background-color : white;
visibility : hidden;
}
.vert {
visibility : hidden;
}
#infobulle {
position : absolute;
font-size : 14px;
background-color : #9CF;
visibility : hidden;
}
Et pour terminer, voici le Javascript :
window.onload = function ()
{
document.onmousemove = Animation.Move;
Animation.Init();
Animation.ScrollIt();
Animation.Vertical();
}
/******************************/
/* */
/* Animation en DHTML */
/* */
/******************************/
Animation = {
rang: 0,
tabl: null,
ind: 0,
cont: null,
/*========================*/
/* Initialisation */
/*========================*/
Init: function ()
{
/*-------------------------------------*/
/* Tableau de la Classe "vert" */
/*-------------------------------------*/
this.rang = 0;
this.tabl = new Array();
var node = document.getElementsByTagName("*");
for (var z=0, t=0; z<node.length; z++)
{
if (node[z].className == "vert")
this.tabl[t++] = node[z];
}
/*-------------------------------------*/
/* */
/*-------------------------------------*/
this.ind = 0;
this.cont = "voila un long message concernant le DHTML !";
/*-------------------------------------*/
/* */
/*-------------------------------------*/
document.getElementById("bulle1").setAttribute("onmouseover", "Animation.Pop(\"Explication sur ce texte\");");
document.getElementById("bulle1").setAttribute("onmouseout", "Animation.Out();");
document.getElementById("bulle2").setAttribute("onmouseover", "Animation.Pop(\"Attention travaux en cours\");");
document.getElementById("bulle2").setAttribute("onmouseout", "Animation.Out();");
},
/*==============================*/
/* Animation du Curseur */
/*==============================*/
Move: function (e)
{
var x = (document.all) ? event.clientX : e.pageX;
var y = (document.all) ? event.clientY : e.pageY;
/*============================================*/
/* On accroche une flèche à la souris */
/*============================================*/
var fleche = document.getElementById("mouse");
fleche.style.left = (x+20) + "px";
fleche.style.top = (y-10) + "px";
fleche.style.zIndex = 10;
/*==========================================*/
/* On accroche un texte à la souris */
/*==========================================*/
var texte = document.getElementById("texte");
texte.style.visibility = "visible";
texte.style.left = (x+5) + "px";
texte.style.top = (y+30) + "px";
texte.style.zIndex = 10;
/*===========================================*/
/* On accroche une bulle à la souris */
/*===========================================*/
var bulle = document.getElementById("infobulle");
bulle.style.left = (x+5) + "px";
bulle.style.top = (y+60) + "px";
bulle.style.zIndex = 10;
},
/*=============================================*/
/* Affichage d'une Bulle d'Information */
/*=============================================*/
Pop: function (message)
{
var bulle = document.getElementById("infobulle");
bulle.innerHTML = message;
bulle.style.visibility = "visible";
},
/*=============================================*/
/* Fermeture de la Bulle d'Information */
/*=============================================*/
Out: function ()
{
var bulle = document.getElementById("infobulle");
bulle.innerHTML = "";
bulle.style.visibility = "hidden";
},
/*================================================*/
/* Défilement horizontal dans une fenêtre */
/*================================================*/
ScrollIt: function ()
{
var xx = this.cont.substring(0, ++(this.ind));
document.getElementById("mess").innerHTML = xx;
if (this.ind > this.cont.length) this.ind = 0;
setTimeout("Animation.ScrollIt();", 100);
},
/*==============================================*/
/* Défilement vertical dans une fenêtre */
/*==============================================*/
Vertical: function ()
{
if (document.all)
var xx = this.tabl[(this.rang)++].innerText;
else var xx = this.tabl[(this.rang)++].textContent;
document.getElementById("bloc").innerHTML = xx;
if (this.rang >= this.tabl.length) this.rang = 0;
setTimeout("Animation.Vertical();", 1000);
}
};
@+
