Décorez votre PC pour Noël en CSS3

18
déc.
2011

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.

transition-property : quel élément est à animer?
transition-duration : combien de temps dure la transition
transition-timing-function : comment assouplir l'animation pour la rendre moins brutale (possibilité d'utiliser des courbes de Béziers)
transition-delay : retarder ou avancer l'animation

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 :