joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

speed is fixed, no longer dependent on viewport width

Browse source
This commit is contained in:
Joe Lothan 2026-05-21 00:44:00 -04:00
parent b53fd7844b
commit fe3d5f7039
1 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/site.js
View file

@ -109,13 +109,14 @@ function createRow(entries, rowIndex) {
const row = document.createElement("div"); const row = document.createElement("div");
row.className = "tab-row"; row.className = "tab-row";
const speed = 90 + (rng() * 60); // 90-150s per cycle const pxPerSec = 20 + (rng() * 15); // 20-35 px/sec, consistent across screen sizes
const goLeft = rng() > 0.5; const goLeft = rng() > 0.5;
const stagger = rng(); const stagger = rng();
row.style.setProperty("--speed", `${speed}s`);
row.classList.add(goLeft ? "scroll-left" : "scroll-right"); row.classList.add(goLeft ? "scroll-left" : "scroll-right");
row.style.animationDelay = `${-stagger * speed}s`;
// Store config — duration calculated after DOM insertion (needs measured width)
row._animConfig = { pxPerSec, stagger };
// Add tabs twice so the marquee loops seamlessly (translate -50% = one full set) // Add tabs twice so the marquee loops seamlessly (translate -50% = one full set)
for (let copy = 0; copy < 2; copy++) { for (let copy = 0; copy < 2; copy++) {
@ -127,6 +128,15 @@ function createRow(entries, rowIndex) {
return row; return row;
} }
// Set animation speed based on actual row width (must be called after DOM insertion)
function startRowAnimation(row) {
const { pxPerSec, stagger } = row._animConfig;
const halfWidth = row.scrollWidth / 2;
const duration = halfWidth / pxPerSec;
row.style.setProperty("--speed", `${duration}s`);
row.style.animationDelay = `${-stagger * duration}s`;
}
// Render entries into rows // Render entries into rows
function renderEntries(entries) { function renderEntries(entries) {
@ -136,7 +146,9 @@ function renderEntries(entries) {
for (let i = 0; i < entries.length; i += perRow) { for (let i = 0; i < entries.length; i += perRow) {
const rowEntries = entries.slice(i, i + perRow); const rowEntries = entries.slice(i, i + perRow);
if (rowEntries.length < 3) continue; // skip tiny last rows if (rowEntries.length < 3) continue; // skip tiny last rows
container.appendChild(createRow(rowEntries, rowIndex)); const row = createRow(rowEntries, rowIndex);
container.appendChild(row);
startRowAnimation(row);
rowIndex++; rowIndex++;
} }
} }