Chenge the Words
HTML + JavaScript
<div id="fullscreen" class="screensaver">
<h1 id="words"></h1>
</div>
<script>
let words = [
"Sounds",
"a lot",
"noise",
"noisy",
"too much",
"busy",
"can not",
"loud",
"don’t want",
"no need",
"fuck all",
];
const chenge = document.getElementById("words");
const the = setInterval(change, 500);
let counter = 0;
chenge.innerHTML = words[counter];
function change() {
chenge.innerHTML = words[counter];
counter++;
if (counter >= words.length) {
counter = 0;
}
};
</script>
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="screensaver.js"></script>
CSS
#fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: #fff9;
z-index: 10;
}
#words {
font-size: 15vw;
padding:0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
}
screensaver.js
let timedelay = 0;
function delayCheck() {
if (timedelay == 25) {
$('.screensaver').fadeIn();
timedelay = 1;
}
timedelay = timedelay + 1;
}
$(document).mousemove(function () {
$('.screensaver').fadeOut();
timedelay = 5;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
_delay = setInterval(delayCheck, 500)