DORITOS AND FRITOS
DORITOS AND FRITOS
DORITOS AND FRITOS
DORITOS AND FRITOS
You must log in to comment.
in reply to @vantablack's post:
completely unrelated, i looked at your website, here is how to make a button to turn off the color animation & be persistent so if you reload it stays off:
also i thought this would be like one line of code but i forgot that making it save across reloads is annoying
1: in <head>, add a script tag:
// if the user has localStorage disabled, save here instead of localStorage
let local_override = null;
// check if the user has colors enabled
function colorsEnabled() {
if(local_override != null) return local_override;
return localStorage.getItem("colors-enabled") !== "false";
}
// toggle colors enabled & save if possible
function toggleColors() {
const new_value = !colorsEnabled();
try {localStorage.setItem("colors-enabled", "" + new_value);}catch(e){}
if(colorsEnabled() !== new_value) local_override = new_value;
updateColors();
}
// update the class on document.body
function updateColors() {
document.body.classList.toggle("rainbow-bg", colorsEnabled());
}
// if changed from another tab, update on this tab too
window.addEventListener("storage", () => updateColors());
// initialize
updateColors();
- script is kinda long because
- i want to save the value in localStorage so if you turn colors off and reload it stays off
- some people have localStorage disabled and they should be able to turn off colors too
- scripts should normally go in the body. this one is in the head tag so it will apply before the website loads. if it's in body, someone might see a flash of background animation before it updates. this maybe doesn't matter too much, but if you're using javascript to make a dark mode it matters a lot so the page doesn't blind viewers while loading
2: update the css to only show rainbow colors for the .rainbow-bg class
body {
background: #33CCCC;
text-align: left;
padding: 1em;
}
.rainbow-bg {
animation: color 18s infinite linear;
}
3: add a <button> to toggle the colors. it should really be a checkbox actually i guess but there's too much code already this is easier
<button onclick="toggleColors()">toggle background rainbow colors</button>
omg thank you!!! i tried doing this but it still isn't working, what did i do wrong?
nvm i figured it out!!! how would i make this button turn off the text rainbow colors too? thank you so much!!!!!!!!!
oh i didn't see that the text was rainbow too lol. stylesheet again. edit the one with the rainbow text styles:
.rainbow-text-loop {
font-size: 1.5rem;
display: inline-block;
margin-top: 0rem;
margin-bottom: 0px;
text-shadow: 2px 2px 4px #000000;
-webkit-animation: rainbow 30s infinite;
}
→
.rainbow-text-loop {
font-size: 1.5rem;
display: inline-block;
margin-top: 0rem;
margin-bottom: 0px;
text-shadow: 2px 2px 4px #000000;
}
.rainbow-bg .rainbow-text-loop {
-webkit-animation: rainbow 30s infinite;
}
it makes it so the animation only plays if the .rainbow-text-loop element is inside a .rainbow-bg element and the toggle button toggles that
thank yooooouuuu!!! but it looks like the animations are toggled off by default? how would i change that so they're on when the page is loaded for the first time?
oh it's my fault for telling you to put the script tag in the <head>. move it to the top of <body> i guess. it tries to set a class on the body as soon as it runs, but it runs before the body even exists yet.
no problem! also one more thing, your cursor seems to be really offset. cursor: url(fluency.png), default`` → cursor: url(fluency.png) 29 7, default will fix it by offsetting the position