CSSJavaScript

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)

コメントを残す