Goufablog

Geek, nouvelles technologies, société et jeux vidéos!
18
déc.
2011
Décorez votre PC pour Noël en CSS3
Technique - par Goufalite - 2268 hits

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 :

GoufaliteGoufalite - Site Web - Steam - Twitter
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.
RSS Voir ses articles...
CC-BY-SACet article est protégé par une licence CC-BY-SA.


Tags : décoration, html5, javascript, noël, transition
Delicious   Facebook   Commentaires(0) | Permalink
Sans commentaires!
Votre avis?
(Obligatoire)

Site et style réalisé par Goufalite
Reproduction interdite sans l'accord de l'auteur.
Valid XHTML 1.0 Transitional Optimisé pour FireFox 2
avec une résolution 1024*768