Comment afficher un temps de lecture restant dynamique dans Webflow ?
Apprenez à afficher un temps de lecture restant qui se met à jour au scroll dans Webflow avec JavaScript.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher un temps de lecture restant dynamique qui se met à jour au scroll dans Webflow.
Exemple
Scrollez la page — le compteur apparaît en bas à droite
| Variable | Valeur | Description |
|---|---|---|
| WPM | 200 | Mots par minute (vitesse de lecture moyenne) |
| words | Compté automatiquement | Nombre de mots dans .article-content |
| totalMin | Calculé | Temps total de lecture en minutes |
| remaining | Mis à jour au scroll | Minutes restantes selon la progression |
1. Ajoutez les éléments dans Webflow
Créez un Text Block avec l'ID reading-time-left à l'endroit où vous voulez afficher le temps restant (header d'article, sticky sidebar...). Ajoutez la classe article-content sur votre zone de contenu.
2. Ajoutez le script dans Footer code
(function() {
var content = document.querySelector('.article-content');
var display = document.getElementById('reading-time-left');
if (!content || !display) return;
var words = content.innerText.trim().split(/\s+/).length;
var WPM = 200;
var totalMin = Math.ceil(words / WPM);
function update() {
var scrolled = window.scrollY;
var docH = document.documentElement.scrollHeight - window.innerHeight;
var pct = Math.min(1, scrolled / docH);
var wordsRead = Math.floor(words * pct);
var remaining = Math.ceil((words - wordsRead) / WPM);
if (remaining <= 0) {
display.textContent = 'Article terminé ✓';
} else if (remaining === totalMin) {
display.textContent = totalMin + ' min de lecture';
} else {
display.textContent = remaining + ' min restante' + (remaining > 1 ? 's' : '');
}
}
update();
window.addEventListener('scroll', update, { passive: true });
})();3. Variante : barre de progression combinée
Combinez avec la barre de progression de lecture pour un indicateur visuel et textuel complet.
Conclusion
Le temps de lecture restant réduit l'abandon en donnant un objectif clair au lecteur. Cas d'usage :
- Articles de blog longs (5 min+)
- Guides et tutoriels techniques
- Pages de documentation
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.















