Les curseurs personnalisés sont un excellent exemple d’amélioration progressive de la conception. Vous commencez avec une interface utilisateur (UI) simple pour les petits appareils tactiles. À partir de là, les appareils plus grands offrent la possibilité d’inclure plus de cloches et de sifflets.
Pour les utilisateurs d’ordinateurs de bureau et d’ordinateurs portables, les effets de curseur peuvent ajouter un élément amusant. Ils peuvent également être liés à l’image de marque. Pensez à un site Web sur le thème de Star Wars qui utilise l’emblématique sabre laser comme curseur. Les possibilités sont pour le moins intrigantes.
Heureusement, la création de ces effets ne nécessite aucune astuce mentale Jedi. Au lieu de cela, un peu de CSS et de JavaScript est tout ce dont vous avez besoin pour commencer.
Nous avons parcouru l’univers de CodePen à la recherche d’effets de curseur sympas. Voici huit extraits de code qui mettent en valeur la créativité des concepteurs de sites Web.
Les différents états du curseur par Zack Hoherchak
Avant de créer des effets exceptionnels, c’est une bonne idée de vous familiariser avec les différents états du curseur. Survolez les exemples ici et voyez comment le CSS cursor travaux immobiliers. Cela seul peut aider à améliorer la convivialité des éléments cliquables.
Sentiers de curseur au néon par Kévin Levron
Peut-être que cette piste de curseur aux couleurs vives ne convient pas à tous les types de sites Web. Mais dans le bon cadre (par exemple, un portefeuille), cet effet pourrait fournir un plaisir high-tech. L’animation fluide et les transitions de couleurs ne manqueront pas d’attirer l’attention de l’utilisateur.
Écran de texte du curseur Spotlight par Caroline Artz
Les effets de curseur peuvent aller au-delà de cette petite flèche (ou point, dans ce cas) sur votre écran. Ici, il ajoute un effet de survol de projecteur à un texte de titre. Ce qui est vraiment étonnant, ce sont les bits relativement petits de CSS et de JavaScript requis pour créer la présentation.
Cet effet témoigne du potentiel des curseurs pour améliorer l’image de marque. Imaginez que ce curseur à éclaboussures d’encre soit utilisé sur le portfolio d’un écrivain ou même dans une imprimerie. Il est également restreint par rapport à certains des effets les plus extravagants. Cela le rend plus adapté aux entreprises
Curseur circulaire avec mode de fusion par Clément Girault
Voici une implémentation intelligente de CSS qui améliore la convivialité. En utilisant le blend-mode , le curseur change de couleur en fonction du contenu de la page. Cela peut améliorer la visibilité de l’élément sur une variété d’arrière-plans.
Curseur de la souris pointant vers CTA par Aaron Iker
Est-ce que vous vraiment vous voulez attirer l’attention d’un utilisateur sur une zone spécifique ? Cet extrait comporte une flèche de curseur qui tourne pour pointer continuellement vers un bouton d’appel à l’action. C’est une petite astuce qui pourrait être juste la chose pour pimenter une zone de héros ou d’autres liens importants.
Curseur personnalisé interactif par hb
Et si un curseur pouvait s’adapter contextuellement en fonction du type de contenu sur lequel vous survolez ? C’est l’idée derrière cet extrait. Le pointeur est un cercle par défaut. Mais survolez un lien et il se transforme en un contour rectangulaire. Il “colle” également aux éléments de navigation dans l’en-tête de la page.
CurseurGeist par Adam Kuhn
Les fêtes de fin d’année sont une excellente excuse pour utiliser les effets de curseur. Par exemple, Halloween offre un éventail de possibilités – comme ce fantôme effrayant. C’est festif, mais la couleur translucide signifie qu’elle ne détournera pas trop du contenu de la page. Notez également comment il réagit à la vitesse des mouvements de votre curseur.
Les effets de curseur peuvent être un puissant outil de conception
Un curseur personnalisé peut avoir autant d’impact que n’importe quelle astuce dans la boîte à outils d’un concepteur. Les extraits ci-dessus ont le pouvoir de transformer un site Web et de créer une ambiance spécifique.
Mais comme on dit, un grand pouvoir s’accompagne d’une grande responsabilité. Et il est tout à fait possible de pousser un effet de curseur trop loin. Cela nuit à la convivialité, sans parler de l’accessibilité. Par conséquent, il est sage d’être judicieux quant à où et comment nous les mettons en œuvre. Pourtant, le bon effet peut aller loin.
Vous cherchez plus d’inspiration? Découvrez notre Collection CodePen pour une gamme complète d’effets de curseur.
