10 extraits CSS et JavaScript personnalisés pour les effets de survol et de clic

Les développeurs peuvent créer des effets fous avec des actions utilisateur simples comme des survols et des clics de souris. Celles-ci concernent principalement les utilisateurs de bureau, mais le Web mobile prend également en charge les effets de clic/tactile dans la plupart des navigateurs.

Si vous cherchez des idées sympas à reproduire dans vos propres projets, cette collection est sûre d'avoir quelque chose pour vous. Quiconque connaît un peu JavaScript et CSS peut facilement modifier ces effets pour qu'ils fonctionnent dans n'importe quel navigateur, pour n'importe quel site Web, et embellir l'expérience d'une mise en page.

Effets de survol des boutons

Le point de départ évident pour les effets d'animation est les boutons CSS. Ce sont les plus pratiques au quotidien car ils gèrent beaucoup d'interactivité. Les boutons CTA demandent pratiquement de l'attention et avec ces effets de survol, vous pouvez attirer l'attention encore plus rapidement.

Chaque effet utilise du CSS pur pour l'animation. Quelques-uns de ces boutons reposent sur JavaScript pour les événements mouseover, mais toutes les animations sont toujours contrôlées directement dans CSS.

Si vous concevez une mise en page plate, ces animations seront très faciles à utiliser.

Survols de navigation

Pour ce stylo, vous trouverez une poignée d'événements de survol de navigation. Ceux-ci reposent sur du CSS pur qui contrôle à nouveau chaque lien hypertexte avec un effet de survol différent.

Les menus de navigation sont généralement très simples et génériques. C'est pourquoi les événements de survol peuvent vraiment pimenter le design et montrer aux visiteurs que vous vous souciez des petits détails.

La plupart de ces animations sont suffisamment apprivoisées pour s'adapter à n'importe quel site Web, elles sont donc idéales pour copier/coller facilement dans n'importe quelle mise en page.

Effets de survol photo

À quelle fréquence trouvez-vous des galeries de photos avec des sous-titres ennuyeux et sans véritable contexte ? Je les vois trop souvent, et ils se sentent juste paresseux.

J'aime beaucoup ces effets photo qui reposent tous sur la simple galerie de vignettes. Lorsque vous survolez une image, vous verrez le titre de la photo, une description et un bouton "Lire la suite".

Chaque élément glisse dans la vue sous différents angles et aide cette galerie d'images à sortir de la page.

Survols des info-bulles CSS

Chaque navigateur prend en charge les info-bulles par défaut, mais vous pouvez toujours créer les vôtres à l'aide de plugins ou en clonant des stylos comme celui-ci. Il a été développé par Ty Strong et montre jusqu'où vous pouvez aller avec des infobulles CSS pures.

Cet extrait entier fonctionne en ciblant la balise HTML <dfn>. Lorsque vous survolez un texte enveloppé dans cette balise, il s'estompera automatiquement lors du survol, apparaissant comme une info-bulle.

Les triangles CSS purs existent depuis des années, il est donc assez facile de recréer le style d'info-bulle. Mais je suis très impressionné par les états d'animation fluides, tous contrôlés via CSS3.

Icônes CSS au survol

Voici encore un autre exemple de quelque chose de cool que vous pouvez faire avec du CSS pur. Ces boutons simples ont tous des icônes masquées qui n'apparaissent que lorsqu'un curseur se pose dessus.

Chaque icône provient de Font Awesome afin que vous puissiez reproduire cette conception avec des icônes totalement gratuites.

Les effets incluent des diapositives, des étirements et des icônes de fondu qui apparaissent au survol et disparaissent lorsque le curseur se déplace ailleurs.

Pagination infinie

La pagination Web est toujours assez ennuyeuse, probablement parce que ce n'est pas une partie flashy de l'interface. Mais avec cet effet de pagination de Mariusz Dabrowski, vous pourriez faire passer votre pagination au niveau supérieur.

La seule chose à propos de cette animation est qu'elle est faite pour se charger d'une page à l'autre. Cela fonctionne donc mieux avec les pages alimentées par Ajax où la page entière ne se recharge pas. De cette façon, toute l'animation est visible pendant le chargement du nouveau contenu.

Il a certainement une valeur pratique limitée mais l'effet est superbe.

Superposer l'animation de navigation

Les menus de navigation en plein écran sont très populaires pour les sites Web réactifs mobiles et ils fonctionnent également pour la plupart des utilisateurs. Mais ceux-ci ne doivent pas nécessairement être ennuyeux ou statiques lorsque vous avez des effets de superposition comme celui-ci gratuitement sur CodePen.

Le développeur Ryan Mulligan a créé cette animation bestiale avec des images clés CSS pures exécutées sur une seule classe CSS.

L'événement de clic est déclenché via jQuery, mais le mouvement est tout en CSS. Certainement l'une des animations les plus cool que j'ai vues et c'est étonnamment fluide pour démarrer.

Effet de clic CSS pur

La conception matérielle de Google décrit un certain nombre d'effets animés et l'un est l'effet de clic d'entraînement. Ceci est le plus courant avec les appareils Android, mais il a également fui sur le Web.

Et avec ce stylo, vous pouvez reproduire l'effet d'entraînement dans votre propre travail en utilisant uniquement du code CSS.

Cet extrait cible les icônes qui s'allument également lorsqu'elles sont sélectionnées, donc c'est un peu plus comme tabuler/sélectionner des éléments de page. Mais les effets sont transférables à tout ce qui rend cela facile à cloner.

Bouton Mana

Voici l'un des effets de bouton les plus uniques que j'aie jamais vus en utilisant des SVG pour les formes et des CSS pour l'animation.

Le codeur Dean Hidri a construit cet effet de bouton de mana avec seulement 80 lignes de CSS et quelques dizaines de lignes de HTML (avec le SVG inclus). Au survol, ce bouton anime une forme liquide personnalisée à l'intérieur du bouton pour créer un remplissage d'arrière-plan, puis s'anime par la suite.

Si vous avez un site qui pourrait utiliser ce style de bouton, cela vaut vraiment la peine de jouer avec.

Bouton emblématique FX

Vous pouvez faire beaucoup avec les polices d'icônes et ces boutons animés de David Darnes en sont un excellent exemple.

Les icônes s'animent de manière différente lorsqu'elles sont survolées, chacune avec son propre effet de signature. Vous ne pouvez pas utiliser toutes ces icônes sur un seul site Web, mais les styles d'animation personnalisés sont faciles à cloner. Ils fonctionnent uniquement sur CSS3 et s'adaptent à toutes les polices d'icônes que vous choisissez. Un effet vraiment amusant à cloner pour à peu près n'importe quel site Web !

Et cela conclut ma liste d'effets UX, mais ce n'est certainement pas la collection définitive.

Si vous parcourez le Web, vous pouvez trouver de nombreux autres effets de survol de boutons / icônes et beaucoup ont un code source gratuit. Mais si vous voulez en savoir plus sur l'animation Web personnalisée, consultez notre liste massive de plugins et de ressources pour les développeurs.