Comment créer un curseur personnalisé dans Webflow ?

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

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