Ajouter

Lorem ipsum

Lorem ipsum

Easter egg

20 vues

3 min

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

📖
Calcul...
0%
VariableValeurDescription
WPM200Mots par minute (vitesse de lecture moyenne)
wordsCompté automatiquementNombre de mots dans .article-content
totalMinCalculéTemps total de lecture en minutes
remainingMis à jour au scrollMinutes 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.

bon à savoir

La vitesse de lecture moyenne est de 200 à 250 mots par minute pour du contenu technique. Ajustez WPM selon votre audience : 180 pour du contenu dense, 250 pour du contenu léger. Le calcul est basé sur le scroll de page, pas sur le temps réel passé sur l'article : un utilisateur qui laisse l'article ouvert sans scroller verra toujours le temps total.

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

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