Comment créer un curseur personnalisé dans Webflow ?
Apprenez à créer un curseur personnalisé dans Webflow : masquer le curseur natif, créer l'élément et le faire suivre la souris.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un curseur personnalisé dans Webflow pour renforcer l'identité visuelle de votre site.
Exemple
Déplacez votre souris ici
| Propriété CSS | Valeur | Description |
|---|---|---|
| cursor | none | Cache le curseur natif du navigateur |
| position | fixed | Le curseur suit la souris |
| pointer-events | none | Le curseur personnalisé ne bloque pas les clics |
| z-index | 9999 | Au-dessus de tous les éléments |
1. Masquez le curseur natif
Dans vos styles globaux Webflow, ajoutez sur le sélecteur body la propriété cursor: none.
2. Créez l'élément curseur dans Webflow
Ajoutez un Div dans le body avec la classe custom-cursor. Réglez : position Fixed, width 20px, height 20px, border-radius 50%, background de votre couleur d'accent, pointer-events: none, z-index: 9999. Laissez-le initialement en position 0,0 (il sera repositionné par le script).
3. Ajoutez ce script dans le <body>
const cursor = document.querySelector('.custom-cursor');
document.addEventListener('mousemove', function(e) {
cursor.style.left = e.clientX - 10 + 'px';
cursor.style.top = e.clientY - 10 + 'px';
});
document.querySelectorAll('a, button').forEach(function(el) {
el.addEventListener('mouseenter', function() { cursor.style.transform = 'scale(2)'; });
el.addEventListener('mouseleave', function() { cursor.style.transform = 'scale(1)'; });
});Conclusion
Un curseur personnalisé renforce l'identité visuelle des sites créatifs. Cas d'usage :
- Portfolios et sites créatifs
- Sites de marque avec forte identité visuelle
- Landing pages immersives
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
