141 lines
3.5 KiB
JavaScript
141 lines
3.5 KiB
JavaScript
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: "<HTML> - 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 +
|
|
`<a href="${cv.href}" target="_blank"><img alt="${cv.alt}" title="${cv.alt}" src="${cv.img}"></a>`,
|
|
""
|
|
);
|
|
}
|
|
|
|
buttonroll.hidden = false;
|
|
overflowButtons();
|
|
initializeButtons();
|
|
overflowButtons();
|
|
overflowButtons();
|
|
|
|
function overflowButtons() {
|
|
buttonroll.innerHTML += buttons.reduce(
|
|
(pv, cv) =>
|
|
pv +
|
|
`<a href="${cv.href}" target="_blank" class="overflow"><img alt="${cv.alt}" title="${cv.alt}" src="${cv.img}"></a>`,
|
|
""
|
|
);
|
|
}
|
|
|
|
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);
|