const buttonroll = document.getElementById("buttonroll"); const buttons = [ { href: "https://jaiden.sh/", img: "/assets/88x31/jaiden_sh.png", alt: "jaiden.sh", }, { href: "https://owenzimmerman.com/", img: "/assets/88x31/owenzimmerman_com.png", alt: "owenzimmerman.com", }, { href: "https://acidicalchemist.neocities.org/", img: "/assets/88x31/acidicalchemist_neocities_org.gif", alt: "acidicalchemist.neocities.org", }, { href: "https://arimelody.me/", img: "/assets/88x31/arimelody_me.gif", alt: "arimelody.me", }, { href: "https://freeplay.floof.company/", img: "/assets/88x31/freeplay_floof_company.png", alt: "freeplay.floof.company", }, { href: "https://invoxiplaygames.uk/", img: "/assets/88x31/invoxiplaygames_uk.png", alt: "invoxiplaygames.uk", }, { href: "https://ioletsgo.gay/", img: "/assets/88x31/ioletsgo_gay.gif", alt: "ioletsgo.gay", }, { href: "https://mae.wtf/", img: "/assets/88x31/mae_wtf.png", alt: "mae.wtf", }, { href: "https://micro.pages.gay/", img: "/assets/88x31/micro_pages_gay.png", alt: "micro.pages.gay", }, { href: "https://sneexy.pages.gay/", img: "/assets/88x31/sneexy_pages_gay.gif", alt: "sneexy.pages.gay", }, { href: "https://whois.slipfox.xyz/", img: "/assets/88x31/whois_slipfox_xyz.png", alt: "whois.slipfox.xyz", }, { href: "https://moth.monster/", img: "/assets/88x31/moth_monster.png", alt: "moth.monster", }, { href: "https://translunar.academy/", img: "/assets/88x31/translunar_academy.png", alt: "translunar.academy", }, { href: "https://ultramarine-linux.org/", img: "/assets/88x31/esoteric/gnu-linux.gif", alt: "Made on GNU/Linux", }, { href: "https://abtmtr.link/projects/item/normalize", img: "/assets/88x31/esoteric/html.gif", alt: " - Learn it today!", }, { href: "https://vivaldi.com", img: "/assets/88x31/esoteric/vivaldi.gif", alt: "I use Vivaldi", }, { href: "https://ublockorigin.com", img: "/assets/88x31/esoteric/ublock.png", alt: "uBlock Origin Now!", }, { href: "https://channelstore.roku.com/details/7da3fa0c2209746730df8a4e21e83b02", img: "/assets/88x31/esoteric/xkcd.gif", alt: "xkcd", }, ]; function initializeButtons() { buttonroll.innerHTML += buttons.reduce( (pv, cv) => pv + `${cv.alt}`, "" ); } buttonroll.hidden = false; overflowButtons(); initializeButtons(); overflowButtons(); overflowButtons(); function overflowButtons() { buttonroll.innerHTML += buttons.reduce( (pv, cv) => pv + `${cv.alt}`, "" ); } let isHovering = false; buttonroll.addEventListener("mouseenter", () => (isHovering = true)); buttonroll.addEventListener("mouseleave", () => (isHovering = false)); let curAnim; let endTime = performance.now(); let unit = 88; let gap = 8; let scrollX = (unit + gap) * buttons.length * 2; let speed = 25; let max = (unit + gap) * buttons.length; function scrollButtons(startTime) { let deltaTime = (startTime - endTime) / 1000; if (!isHovering) { scrollX += speed * deltaTime; } else scrollX = buttonroll.scrollLeft; buttonroll.scrollLeft = (scrollX % max) + max; endTime = startTime; curAnim = window.requestAnimationFrame(scrollButtons); } curAnim = window.requestAnimationFrame(scrollButtons);