Comment créer un curseur avec traînée thématique selon la section dans Webflow ?

Apprenez à créer un curseur dont la traînée change de couleurs selon la section de la page dans Webflow.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un curseur avec une traînée dont les couleurs changent selon la section de la page dans Webflow.

Exemple

Changez de thème puis bougez la souris dans la zone

Bougez la souris ici

Thème actif : feu

Thème	Couleurs	Attribut custom
fire (défaut)	Orange, rouge, doré	data-cursor-theme='fire'
water	Bleu, cyan, ciel	data-cursor-theme='water'
nature	Vert, émeraude	data-cursor-theme='nature'

1. Ajoutez l'attribut sur vos sections

Sur chaque section Webflow où vous voulez un thème différent, ajoutez le custom attribute data-cursor-theme avec la valeur fire, water ou nature. Le script détecte automatiquement quelle section est au centre de l'écran.

2. Ajoutez le script dans Footer code

(function() {
  if (!window.matchMedia('(pointer: fine)').matches) return;

  var COUNT = 15;
  var particles = [];
  var mouseX = 0, mouseY = 0;

  // Détecter la section active pour changer le thème
  function getTheme() {
    var sections = document.querySelectorAll('[data-cursor-theme]');
    var active = 'fire';
    sections.forEach(function(s) {
      var rect = s.getBoundingClientRect();
      if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
        active = s.dataset.cursorTheme;
      }
    });
    return active;
  }

  var themes = {
    fire:  ['#ff4500','#ff6a00','#ffb347','#ff8c00','#ffd700'],
    water: ['#00bfff','#1e90ff','#87ceeb','#4169e1','#00ced1'],
    nature:['#22c55e','#4ade80','#86efac','#16a34a','#bbf7d0'],
  };

  for (var i = 0; i < COUNT; i++) {
    var p = document.createElement('div');
    p.style.cssText = 'position:fixed;pointer-events:none;border-radius:50%;z-index:9999;transition:opacity 0.4s;opacity:0;';
    document.body.appendChild(p);
    particles.push({ el: p, x: 0, y: 0, life: 0 });
  }

  document.addEventListener('mousemove', function(e) {
    mouseX = e.clientX; mouseY = e.clientY;
    var theme = getTheme();
    var colors = themes[theme] || themes.fire;
    var p = particles[Math.floor(Math.random() * COUNT)];
    var size = 6 + Math.random() * 8;
    var color = colors[Math.floor(Math.random() * colors.length)];
    p.el.style.width = size + 'px';
    p.el.style.height = size + 'px';
    p.el.style.background = color;
    p.el.style.left = mouseX + 'px';
    p.el.style.top = mouseY + 'px';
    p.el.style.opacity = '0.8';
    p.el.style.boxShadow = '0 0 6px ' + color;
    setTimeout(function() { p.el.style.opacity = '0'; }, 150);
  });
})();

3. Ajoutez votre propre thème

Ajoutez une entrée dans l'objet themes avec vos couleurs de marque :

var themes = {
  fire: ['#ff4500','#ff6a00','#ffd700'],
  water: ['#00bfff','#1e90ff','#87ceeb'],
  nature: ['#22c55e','#4ade80','#86efac'],
  brand: ['#a78bfa','#f472b6','#60a5fa'], // Vos couleurs custom
};

bon à savoir

Le script vérifie window.matchMedia('(pointer: fine)') pour s'assurer qu'il s'exécute uniquement sur les appareils avec une souris précise (desktop). Sur mobile et tablette, aucun curseur n'est affiché, ce qui évite les effets parasites sur les événements tactiles.

Conclusion

Un curseur thématique ajoute une dimension narrative à la navigation. Cas d'usage :

Sites créatifs avec sections thématiques distinctes
Portfolios d'agences avec transitions entre projets
Landing pages storytelling avec plusieurs actes

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.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute