Easing.net :
Choisissez la bonne vitesse d'exécution pour rendre vos animations réalistes.
Le 2013-03-22 10:55:20, par FirePrawn, Expert éminent sénior
Animer des éléments sur une page Web est devenu possible grâce à la version 3 de CSS.
Ces animations ont très vite fait l'unanimité et sont de plus en plus utilisées, que ce soit à des fins ergonomiques ou à des fins scientifiques (jeux vidéo par exemple).
Cependant, il convient d'aller un peu plus loin que juste utiliser bêtement ces possibilités.
Easing.net vous explique ce qu'est « l'easing » et pourquoi c'est important.
En effet, une plume tombant d'un toit n'aura pas du tout la même vitesse de chute qu'une boule de bowling.
Et c'est précisément ces différences que nous explique Easing.net.
Le site fournit de nombreux graphiques animés vous permettant d'identifier et de comprendre les différents types d'animations possibles et existants.
Ces exemples vont de l'animation la plus simple (vitesse quasi constante) à des animations bien plus complexes.
Easing.net vous donne également trois exemples simples d'implémentation de « l'easing » :
Pour plus d'informations et voir les exemples d'animations je vous invite à consulter la version française du site.
Source : thechangelog.com
Et vous ?
Ces animations ont très vite fait l'unanimité et sont de plus en plus utilisées, que ce soit à des fins ergonomiques ou à des fins scientifiques (jeux vidéo par exemple).
Cependant, il convient d'aller un peu plus loin que juste utiliser bêtement ces possibilités.
Easing.net vous explique ce qu'est « l'easing » et pourquoi c'est important.
En effet, une plume tombant d'un toit n'aura pas du tout la même vitesse de chute qu'une boule de bowling.
Et c'est précisément ces différences que nous explique Easing.net.
Le site fournit de nombreux graphiques animés vous permettant d'identifier et de comprendre les différents types d'animations possibles et existants.
Ces exemples vont de l'animation la plus simple (vitesse quasi constante) à des animations bien plus complexes.
Easing.net vous donne également trois exemples simples d'implémentation de « l'easing » :
- avec le plugin jQuery Easing ;
- en SCSS ;
- en CSS 3.
Pour plus d'informations et voir les exemples d'animations je vous invite à consulter la version française du site.
Source : thechangelog.com
Et vous ?