Ajouter

Lorem ipsum

Lorem ipsum

Design

18 vues

3 min

Comment créer un curseur avec traînée d'étoiles dans Webflow ?

Apprenez à créer un curseur avec une traînée d'étoiles colorées dans Webflow avec JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un curseur avec une traînée d'étoiles colorées dans Webflow.

Exemple

Déplacez votre souris dans la zone

✨ Bougez votre souris ici
ParamètreValeur par défautDescription
COUNT12Nombre d'étoiles dans la traînée
SIZE10Taille des étoiles en pixels
COLORSViolet, rose, bleu...Couleurs des étoiles

Le script

Collez ce script dans le champ Footer code de votre article CMS. Il s'exécute automatiquement sur la page.

(function() {
var COUNT = 12, SIZE = 10;
var COLORS = ['#a78bfa','#f472b6','#60a5fa','#34d399','#fbbf24'];
var stars = [];
for (var i = 0; i < COUNT; i++) {
var s = document.createElement('div');
s.style.cssText = 'position:fixed;pointer-events:none;border-radius:50%;z-index:9999;transition:opacity 0.3s;';
document.body.appendChild(s);
stars.push({ el: s, x: 0, y: 0 });
}
document.addEventListener('mousemove', function(e) {
var s = stars[Math.floor(Math.random() * COUNT)];
var color = COLORS[Math.floor(Math.random() * COLORS.length)];
var size = SIZE * (0.5 + Math.random() * 0.5);
s.el.style.cssText += 'width:'+size+'px;height:'+size+'px;background:'+color+';left:'+e.clientX+'px;top:'+e.clientY+'px;opacity:1;';
setTimeout(function() { s.el.style.opacity = '0'; }, 100);
});
})();

bon à savoir

Pour une version encore plus fun, remplacez les divs ronds par des emojis étoiles ⭐ ou des SVG custom. Changez s.el.innerHTML = '⭐' et retirez border-radius:50% du cssText.

Conclusion

Un easter egg discret et impactant. Parfait sur les sites créatifs et les portfolios. Voir aussi : créer un curseur personnalisé dans Webflow.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...