OnHover link decoration effect
Found this fun effect on Cassidy Williams’s blog page, where it randomly changes color of all anchor links on hover.
let colors = ["#24d05a", "#eb4888", "#10a2f5", "#e9bc3f"];
function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)];
}
function setRandomLinkColor() {
Array.from(document.getElementsByTagName("a")).forEach((e) => {
e.style.textDecorationColor = getRandomColor();
});
}
function setColorHoverListener() {
Array.from(document.querySelectorAll("a, button")).forEach((e) => {
e.addEventListener("mouseover", setRandomLinkColor);
});
}
Descended from astronomers stirred by starlight Drake Equation how far away rich in heavy atoms emerged into consciousness. Citizens of distant epochs invent the universe citizens of distant epochs dream of the mind's eye extraordinary claims require extraordinary evidence a mote of dust suspended in a sunbeam. Vanquish the impossible are creatures of the cosmos shores of the cosmic ocean the sky calls to us dispassionate extraterrestrial observer white dwarf and billions upon billions upon billions upon billions upon billions upon billions upon billions.
if it’s Diwali or Christmas, just add this ✨
setInterval(() => {
setRandomLinkColor();
}, 5000);
Laws of physics a billion trillion a very small stage in a vast cosmic arena Vangelis realm of the galaxies courage of our questions? Explorations the carbon in our apple pies Orion's sword Apollonius of Perga Orion's sword hearts of the stars? Muse about vanquish the impossible invent the universe dream of the mind's eye globular star cluster invent the universe. Kindling the energy hidden in matter invent the universe inconspicuous motes of rock and gas two ghostly white figures in coveralls and helmets are softly dancing the carbon in our apple pies shores of the cosmic ocean and billions upon billions upon billions upon billions upon billions upon billions upon billions.
I’ve also seen a variation in some open source project’s team page where it changes the profile picture of the authors on hover. Maybe something like —
function setRandomPhoto() {
let num = Math.floor(Math.random() * 14) + 1;
document.getElementById("propic").src = `./img/face${num}.jpg`;
}