Ajouter

Lorem ipsum

Lorem ipsum

Design

11 vues

3 min

Comment détecter un scroll rapide dans Webflow et déclencher une animation ?

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

bon à savoir

Pour une version moins intrusive, ajoutez simplement une classe CSS sur le body : document.body.classList.toggle('is-fast-scrolling', speed > THRESHOLD). Stylisez ensuite .is-fast-scrolling pour adapter le design.

Conclusion

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

exemple interactif

Scrollez très rapidement sur cette page pour déclencher le message

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