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

shake

Grâce à des transformations et animations CSS3, il vous est possible de faire vibrer n’importe quel élément DOM, que ce soit de façon permanente ou au rollover. Pour cela, CSShake.css est la feuille de style proposant ce nouvel effet visuel.

L’exemple concret de l’effet de vibration est le menu de notre blog

Les vibrations : slow, fixed horizontal, basic…

Aujourd’hui, les navigateurs sont bien plus évolués que dans le temps. En effet, avec la feuille de style CSShake.css, vous pourrez réaliser des effets de vibration qui seront compatibles sur les navigateurs récents. Avec la version Sass packagée sous forme de mixins, vous avez à votre disposition une dizaine de vibrations qui sont prédéfinies : fixed horizontal, basic, slow…

Par défaut, CSShake.css n’applique l’effet « shake » qu’au rollover de l’élément concerné. Toutefois, vous pourrez inverser ce comportement pour que la vibration s’applique de façon permanente sur l’élément, voire même qu’elle soit stoppé au rollover de l’élément. Ces deux cas présents, il est possible d’ajouter une classe « freeze » permettant de garder l’état de la dernière vibration lorsque celle-ci est arrêtée.

Mise en place

Pour commencer, il faut inclure dans le document HTML, le fichier CSS.

Il ne reste plus qu’à application les classes CSS sur vos éléments.

Compatibilité

Navigateurs Versions Détails
Internet Explorer Internet Explorer Compatible à partir de la Version 10+
Firefox FirefoxFirefox Mobile Compatible toutes versions avec préfixe -moz-
Chrome ChromeChrome Mobile Compatible toutes versions avec préfixe -webkit-
Opera Opera 11.1+Opera Mobile 11.1+ Compatible sans préfixe
Safari Safari 3.2+Safari Mobile 3.2+ Compatible avec préfixe -webkit-

Vidéo de démonstration

Répondre