smoother marquee and fixed icon jitter/stutter in firefox
This commit is contained in:
parent
4fa40c7b47
commit
b53fd7844b
3 changed files with 47 additions and 7 deletions
|
|
@ -21,7 +21,8 @@ function detectBrowser() {
|
|||
if (ua.includes("Safari") && !ua.includes("Chrome")) return "safari";
|
||||
return "chrome"; // Chrome, Edge, Opera, Brave, etc.
|
||||
}
|
||||
document.body.classList.add(`browser-${detectBrowser()}`);
|
||||
const browserName = detectBrowser();
|
||||
document.body.classList.add(`browser-${browserName}`);
|
||||
|
||||
// How many tabs fit in one row?
|
||||
function tabsPerRow() {
|
||||
|
|
@ -109,14 +110,12 @@ function createRow(entries, rowIndex) {
|
|||
row.className = "tab-row";
|
||||
|
||||
const speed = 90 + (rng() * 60); // 90-150s per cycle
|
||||
row.style.setProperty("--speed", `${speed}s`);
|
||||
|
||||
// Random direction
|
||||
const goLeft = rng() > 0.5;
|
||||
row.classList.add(goLeft ? "scroll-left" : "scroll-right");
|
||||
const stagger = rng();
|
||||
|
||||
// Stagger start so rows aren't synchronized
|
||||
row.style.animationDelay = `${-rng() * speed}s`;
|
||||
row.style.setProperty("--speed", `${speed}s`);
|
||||
row.classList.add(goLeft ? "scroll-left" : "scroll-right");
|
||||
row.style.animationDelay = `${-stagger * speed}s`;
|
||||
|
||||
// Add tabs twice so the marquee loops seamlessly (translate -50% = one full set)
|
||||
for (let copy = 0; copy < 2; copy++) {
|
||||
|
|
@ -128,6 +127,7 @@ function createRow(entries, rowIndex) {
|
|||
return row;
|
||||
}
|
||||
|
||||
|
||||
// Render entries into rows
|
||||
function renderEntries(entries) {
|
||||
const perRow = tabsPerRow();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue