![]() Geek, nouvelles technologies, société et jeux vidéos! | |||||
L'année dernière je vous proposais une petite application en Javascript pour faire alterner de jolies couleurs sur votre écran. Maintenant que j'ai découvert le CSS3 et ses capacités j'ai pu réduire sauvagement le code et laisser le navigateur gérer lui-même la transition de couleur. Cependant il reste encore du Javascript pour choisir aléatoirement quel fond afficher, mais voyez plutot... <html>
<head>
<style type='text/css'>
#main{
/* qu'est-ce qu'on change? */
transition-property: background-color;
/* pendant combien de temps? */
transition-duration: 5s;
/* selon quelle variance? */
/* peut prendre : ease-in, ease-out, ease-in-out, ease, linear, ou des courbes de Bezier */
transition-timing-function:ease-in-out;
/* retrocompatibilité navigateurs */
-webkit-transition-property: background-color;
-webkit-transition-duration: 5s;
-webkit-transition-timing-function:ease-in-out;
-moz-transition-property: background-color;
-moz-transition-duration: 5s;
-moz-transition-timing-function:ease-in-out;
-o-transition-property: background-color;
-o-transition-duration: 5s;
-o-transition-timing-function:ease-in-out;
-ms-transition-property: background-color;
-ms-transition-duration: 5s;
-ms-transition-timing-function:ease-in-out;
}
</style>
<script type='text/javascript'>
function changeColor()
{
// nouvelle couleur
a = Math.floor(Math.random()*255);
b = Math.floor(Math.random()*255);
c = Math.floor(Math.random()*255);
document.getElementById("main").style.backgroundColor = "rgb("+a+","+b+","+c+")";
window.setTimeout("changeColor()",5000);
}
</script>
</head>
<body id="main" onLoad='Javascript:changeColor();'>
</body>
</html>
Grâce aux attributs de transition de CSS3, il est possible de faire des animations de grande qualité tout en mettant le moins de code possible.
Il suffit ensuite de modifier l'élément à animer en Javascript ou avec le :hover de CSS, le navigateur va gérer lui-même la transition. Toutefois cette application ne marche que sur les navigateurs compatibles HTML5, et il faut rajouter tous les attributs propriétaires dans la page de style comme vous pouvez le voir dans le code. Pour palier à ce dernier problème on peut récupérer une librairie Javascript qui va rajouter les attributs propriétaires de tout à l'heure en dynamique. N'oubliez pas de mettre le plein écran (F11 par défaut) pour profiter pleinement de votre nouvel économiseur d'écran et bonnes fêtes en avance! Vous pouvez aussi lire :
![]() Rédacteur et programmeur principal du Goufablog. Ingénieur de profession et avide de connaissances technologiques et scientifiques il partage son savoir à travers ces différents articles. Plus de renseignements sur la page de contact. ![]()
|
![]() |
||||
|
Votre avis?