Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
Easter egg

5 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

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

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.

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