Brozzme Hover Integration vous permet d’ajouter simplement des effets et animations CSS3 aux éléments de votre site sans avoir besoin de connaissances techniques. Ajoutez simplement la class CSS à l’éléments dans les réglages de l’extension pour l’appliquer partout sur votre site ou ajouter la class à une balise particulière et bénéficiez des animations Hover.css by Ian Lunn.
Cette extension a été développée dans le but de simplifier cette intégration sans avoir besoin de coder quoique ce soit, c’est pourquoi, les fonctionnalités Less Sass n’y ont pas été intégrées même si la gestion des couleurs pourrait être simplifiée avec ces technologie.
Cette extension est basée sur la librairie Hover.css V2 pour les animations CSS3. Cette extension permet d’intégrer simplement des animations étonantes et originales quelque soit votre thème.
Comment ça marche et quelles sont les possibilités ?
Brozzme Hover Integration, enregistre et charge les feuilles de style Hover.css à vos pages. Ajoute un menu spécifique pour ajouter des animations aux éléments. Vous pouvez régler l’extension pour ajouter une plusieurs animations aux éléments statiques de votre thème.
Options disponibles :
Activer l’extension : une fois activée sur la page des extension vous pouvez encore la régler sans pour autant activer les effets sur le site. L’activation et la désactivation n’efface pas les réglages.
Activer Brozzme Hover et un menu de sélection (Formats) est ajouté à l’éditeur, permettant de choisir parmi l’ensemble des animations disponibles.Assurez-vous de ne pas avoir plusieurs class (par exemple : hvr-xxx). Dans ce cas, pour vérifier et corriger, il suffit de passer du mode Visuel au mode Texte pour supprimer les class en trop, manuellement. Pour une image il suffit de la sélectionner et d’en modifier les détails.
Notez que certains sélecteurs ne pourront pas fonctionner à cause des limitations CSS sur certaines balises (inline-block, margin….). Ajustez les propriétés CSS dans le fichier style.css qui se trouve dans le dossier css de l’extension.
Le chargement jQuery dans le header ou le footer n’est nécessaire que si vous désirez appliquer des effets Brozzme Hover globalement.
Détection des class CSS
Détection des class CSS pour les animer dans votre navigateur favori. Assurez-vous de les séparer avec des virgules sans espaces avant ou après.
Effet : choisissez votre effet de transition pour l’appliquer à toute les class déterminées.
Changez la couleur de fond de l’animation : la personnalisation de la couleur de fond de certaines animations est possible si nécessaires (par ex: background transitions).
Cette extension à été testée à partir de WordPress 4.2.3 jusqu’à la version 4.9.6. La compatibilité des fonctionnalités avec Gutenberg n’est pas encore disponibles.
