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 {
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.";
}