Something I need to test still, but adding it here for later use, maybe. If you find a bug, please let me know! And I’m halfways sure that the author shown in this link does it less complicated, but it’s fun to learn and play around with code. https://github.com/kleampa/not-paid
GOAL: Let the website fade away, one step per day.
Define the initial opacity as 1 (fully opaque).
<style>
body {
opacity: 1; /* Initial opacity */
transition: opacity 1s ease; /* Smooth transition */
}
</style>
Modify the function to decrement the opacity by a step (e.g., 0.1).
<script>
function decreaseOpacity() {
let body = document.body;
let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
if (currentOpacity > 0) {
body.style.opacity = (currentOpacity - 0.1).toFixed(1);
}
}
</script>
Adjust the local storage logic accordingly.
<script>
document.addEventListener("DOMContentLoaded", function() {
let storedOpacity = localStorage.getItem('bodyOpacity');
if (storedOpacity) {
document.body.style.opacity = storedOpacity;
} else {
localStorage.setItem('bodyOpacity', '1');
}
});
function decreaseOpacity() {
let body = document.body;
let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
if (currentOpacity > 0) {
let newOpacity = (currentOpacity - 0.1).toFixed(1);
body.style.opacity = newOpacity;
localStorage.setItem('bodyOpacity', newOpacity);
}
}
</script>
Modify the date-checking logic to call the decreaseOpacity function.
<script>
document.addEventListener("DOMContentLoaded", function() {
let storedOpacity = localStorage.getItem('bodyOpacity');
let lastIncrementDate = localStorage.getItem('lastIncrementDate');
let today = new Date().toDateString();
if (storedOpacity) {
document.body.style.opacity = storedOpacity;
} else {
localStorage.setItem('bodyOpacity', '1');
localStorage.setItem('lastIncrementDate', today);
}
if (lastIncrementDate !== today) {
decreaseOpacity();
localStorage.setItem('lastIncrementDate', today);
}
});
function decreaseOpacity() {
let body = document.body;
let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
if (currentOpacity > 0) {
let newOpacity = (currentOpacity - 0.1).toFixed(1);
body.style.opacity = newOpacity;
localStorage.setItem('bodyOpacity', newOpacity);
}
}
</script>
Here is how the complete HTML file might look for the fading away effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decrease Opacity</title>
<style>
body {
opacity: 1; /* Initial opacity */
transition: opacity 1s ease; /* Smooth transition */
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<script>
document.addEventListener("DOMContentLoaded", function() {
let storedOpacity = localStorage.getItem('bodyOpacity');
let lastIncrementDate = localStorage.getItem('lastIncrementDate');
let today = new Date().toDateString();
if (storedOpacity) {
document.body.style.opacity = storedOpacity;
} else {
localStorage.setItem('bodyOpacity', '1');
localStorage.setItem('lastIncrementDate', today);
}
if (lastIncrementDate !== today) {
decreaseOpacity();
localStorage.setItem('lastIncrementDate', today);
}
});
function decreaseOpacity() {
let body = document.body;
let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
if (currentOpacity > 0) {
let newOpacity = (currentOpacity - 0.1).toFixed(1);
body.style.opacity = newOpacity;
localStorage.setItem('bodyOpacity', newOpacity);
}
}
</script>
</body>
</html>
So with this setup, the opacity of the body tag will start at 1 (fully opaque) and decrease by 0.1 each day until it reaches 0 (fully transparent). The localStorage ensures that the opacity persists across browser sessions and days.
Have you tried it? Let me know!
