Aller au contenu

Design3 min lecture

Comment déclencher une animation lors d’un scroll rapide ?

Apprenez à détecter un scroll rapide dans Webflow et déclencher une animation ou un message surprise.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment déclencher une animation quand l'utilisateur fait défiler la page très rapidement dans Webflow.

ParamètreValeurDescription
THRESHOLD80Vitesse en px/frame pour déclencher l'effet
toastShownfalseÉvite les déclenchements répétés

Le script

(function() {
  var style = document.createElement('style');
  style.textContent = '@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }';
  document.head.appendChild(style);
  var lastScroll = 0, lastTime = Date.now(), toastShown = false;
  var THRESHOLD = 80;
  window.addEventListener('scroll', function() {
    var now = Date.now();
    var delta = Math.abs(window.scrollY - lastScroll);
    var timeDiff = now - lastTime || 1;
    var speed = delta / timeDiff * 16;
    if (speed > THRESHOLD && !toastShown) {
      toastShown = true;
      var toast = document.createElement('div');
      toast.textContent = '🚀 Woah, tu scrolles vite !';
      toast.style.cssText = 'position:fixed;top:24px;right:24px;background:#a78bfa;color:#fff;padding:10px 20px;border-radius:100px;font-size:14px;z-index:9999;animation:slideDown 0.3s ease;';
      document.body.appendChild(toast);
      setTimeout(function() { toast.remove(); toastShown = false; }, 2000);
    }
    lastScroll = window.scrollY;
    lastTime = now;
  });
})();

Conclusion

Un easter egg original qui récompense les explorateurs impétueux. Scrollez vite pour tester l'effet.

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 !!