Comment faire un curseur personnalisé sur ton site Webflow ?

Le curseur de votre site web peut rapidement devenir monotone. Dans cet article, nous allons apprendre à transformer ce petit curseur de souris en un élément plus attractif et dynamique. Suivez ces étapes pour créer un curseur rond qui suit le déplacement de votre souris. Pour plus d'inspiration, vous pouvez consulter la librairie Scrapflow qui regroupe les meilleurs sites Webflow avec des curseurs personnalisés.

Résumé de la méthode pour créer un curseur personnalisé sur Webflow

Pour créer un curseur personnalisé sur Webflow, commencez par ajouter une div et nommez-la custom-cursor, puis positionnez-la en fixe et définissez ses dimensions. Ajoutez des bordures et appliquez un border-radius de 100% pour obtenir un cercle parfait. Créez une animation de mouvement en utilisant les propriétés move sur les axes X et Y, et ajustez les valeurs pour qu'elles correspondent à la taille de la fenêtre. Masquez le curseur par défaut avec cursor: none et rendez la div transparente en utilisant pointer-events: none. Enfin, sauvegardez et prévisualisez pour vérifier le bon fonctionnement du curseur personnalisé.

Étape 1 : Création de la structure du curseur

1. Accédez à votre projet Webflow.
2. Ajoutez une div :
   • Sortez de la preview.
   • Placez-vous au niveau du body ou de votre page wrapper.
   • Ajoutez une div avec le raccourci Command + E.
   • Nommez cette div custom-cursor.
3. Positionnez et dimensionnez la div :
   • Définissez la position en fixe (top: 0, left: 0).
   • Donnez-lui une taille initiale de 1.5rem x 1.5rem.

Étape 2 : Style du curseur

1. Ajoutez des bordures :
   • Choisissez des bordures solid de 2 pixels, de couleur noire.
2. Rendez le curseur rond :
   • Appliquez un border-radius de 100%.

Étape 3 : Animation du curseur

1. Créez une nouvelle animation :
   • Accédez au panneau d’interaction et créez un page trigger.
   • Sélectionnez Mouse move in viewport.
2. Définissez les mouvements sur l’axe X et Y :
   • Ajoutez une animation move pour les axes X et Y.
   • Utilisez les unités VW pour l’axe X et VH pour l’axe Y afin d’adapter le mouvement à la taille de la fenêtre.
   • Ajustez les valeurs à -1 VW à 99 VW pour l’axe X, et -1 VH à 99 VH pour l’axe Y.

Étape 4 : Masquer le curseur par défaut

1. Masquez le curseur de la souris :
   • Appliquez la propriété CSS cursor: none au body.

Étape 5 : Rendre le curseur cliquable

1. Évitez les conflits de clics :
   • Ajoutez une propriété CSS pointer-events: none à la classe custom-cursor.
   • Ajoutez cette propriété via un code embed dans Webflow.

Étape 6 : Sauvegarde et test

1. Sauvegardez et prévisualisez :
   • Assurez-vous que le curseur suit bien la souris et qu'il n'y a pas de conflit de clic avec d'autres éléments de la page.

En résumé, pour créer un curseur personnalisé sur Webflow, commencez par ajouter une div et nommez-la custom-cursor, puis positionnez-la en fixe et définissez ses dimensions. Ajoutez des bordures et appliquez un border-radius de 100% pour obtenir un cercle parfait. Créez une animation de mouvement en utilisant les propriétés move sur les axes X et Y, et ajustez les valeurs pour qu'elles correspondent à la taille de la fenêtre. Masquez le curseur par défaut avec cursor: none et rendez la div transparente en utilisant pointer-events: none. Enfin, sauvegardez et prévisualisez pour vérifier le bon fonctionnement du curseur personnalisé.