From fa9534609cee7d1e7f844d1de07686806bddaa39 Mon Sep 17 00:00:00 2001 From: ramforth Date: Fri, 31 Oct 2025 11:43:52 +0100 Subject: [PATCH] feat: Implement dynamic RSS ticker animation speed --- rss_ticker_overlay/rss_ticker.html | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/rss_ticker_overlay/rss_ticker.html b/rss_ticker_overlay/rss_ticker.html index 8bcb1f1..c0b2dc1 100644 --- a/rss_ticker_overlay/rss_ticker.html +++ b/rss_ticker_overlay/rss_ticker.html @@ -22,7 +22,7 @@ #ticker-content { display: inline-block; padding-left: 100%; /* Start off-screen */ - animation: ticker-scroll 240s linear infinite; + } @keyframes ticker-scroll { 0% { transform: translate3d(0, 0, 0); } @@ -90,7 +90,20 @@ } }); if (headlines.length > 0) { - document.getElementById('ticker-content').textContent = headlines.join(" | "); + const tickerContent = document.getElementById('ticker-content'); + tickerContent.textContent = headlines.join(" | "); + + // Calculate dynamic animation duration + const pixelsPerSecond = 50; // Adjust this value to change the perceived speed + const contentWidth = tickerContent.scrollWidth; + const animationDuration = contentWidth / pixelsPerSecond; + + // Apply and restart animation + tickerContent.style.animationDuration = `${animationDuration}s`; + tickerContent.style.animation = 'none'; // Reset animation + void tickerContent.offsetWidth; // Trigger reflow + tickerContent.style.animation = 'ticker-scroll ${animationDuration}s linear infinite'; + } else { document.getElementById('ticker-content').textContent = "No headlines found in feed."; }