Aller au contenu

Design3 min lecture

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);
  });
})();

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 19 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

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

demander un devis

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