ramforth/Overlays
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dynamic RSS ticker animation speed

Browse Source
This commit is contained in:
ramforth
2025-10-31 11:43:52 +01:00
parent 7b9095f849
commit fa9534609c
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
rss_ticker_overlay/rss_ticker.html
View File

@@ -22,7 +22,7 @@
#ticker-content { #ticker-content {
display: inline-block; display: inline-block;
padding-left: 100%; /* Start off-screen */ padding-left: 100%; /* Start off-screen */
animation: ticker-scroll 240s linear infinite;
} }
@keyframes ticker-scroll { @keyframes ticker-scroll {
0% { transform: translate3d(0, 0, 0); } 0% { transform: translate3d(0, 0, 0); }
@@ -90,7 +90,20 @@
} }
}); });
if (headlines.length > 0) { 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 { } else {
document.getElementById('ticker-content').textContent = "No headlines found in feed."; document.getElementById('ticker-content').textContent = "No headlines found in feed.";
} }