CSShake.css, des classes pour faire vibrer vos éléments HTML

24 mars 2014

CSShake.css est une feuille de style, disponible en version Sass ou « standard », qui propose un effet visuel original : faire vibrer n’importe quel élément du DOM, que ce soit au rollover ou de façon permanente, grâce à des animations et transformations CSS.

Shake your <body>

Il y a quelques années, Megaptery vous partageait jRumble, un plugin jQuery permettant de faire vibrer n’importe quel élément HTML. Si à l’époque la ressource utilisait déjà les transformations CSS, le script était conçu entièrement en JavaScript et le support CSS3 limité.

Depuis, les navigateurs ont bien évolué puisque CSShake.css vous permet de réaliser des effets de vibration similaires et compatibles sur tous les navigateurs récents avec une simple feuille de style. La ressource, qui propose une version Sass packagée sous forme de mixins, met à disposition une dizaine de vibrations prédéfinies (basic, slow, fixed horizontal, etc).

shaking_dom

Par défaut, la feuille de style applique l’effet « shake » uniquement au rollover de l’élément concerné mais vous pouvez inverser le comportement pour que la vibration s’applique de façon permanente sur l’élément, voire même qu’elle soit stoppée au rollover de celui-ci. Dans les deux cas, il est possible d’ajouter une classe « freeze » qui va garder l’état de la dernière vibration lorsqu’elle est arrêtée. Pour mieux comprendre, faites un tour sur la page de démonstration.

Votre première vibration

Tout d’abord, commencez par inclure le fichier CSS dans votre document HTML.

<link type="text/css" href="csshake.css">

Et reste plus qu’à appliquer les classes CSS sur vos éléments. Et terminé !

<div class="shake"></div>
<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake-vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>

Pour ceux qui souhaitent passer par Sass, il vous faudra simplement récupérer les fichiers SCSS (csshake.scss importe _mixins.scss et _shake.scss) et à vous de jouer ! Attention tout de même ; une note concernant l’utilisation de la fonction random() pour la compilation Sass est à lire dans la documentation en cas de besoin.

À noter que vous pouvez bien sûr modifier les différents effets proposés, voire même créer vos propres effets. En tout cas, cette ressource propose une interaction assez originale, et si elle est bien utilisée, elle ira à merveille avec certains webdesign.

Requis : Sass
Compatibilité : Chrome, Firefox, Opera, Safari, IE10+
Démonstration : http://elrumordelaluz.github.io/csshake/
GitHub : https://github.com/elrumordelaluz/csshake
Licence : MIT

Commentaires