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ètre | Valeur | Description |
|---|---|---|
| THRESHOLD | 80 | Vitesse en px/frame pour déclencher l'effet |
| toastShown | false | É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.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.




.avif)










