css – How to make a function to play only on the home page?

Question

How can I make the 2 functions setTimeOut that are showing the element with id=”mess” and then hiding it, run only on the home page, so that if the user goes to another page, it doesnt run again. I know the code doesnt work here. It is working on a website on wordpress with elementor. Thank you!

<div id="cursorz">
  <div class="message" id="mess">Look at you! You look beautiful today!</div>
</div>

@media only screen and (min-width: 1367px) {
body {cursor:none;}
.message {
width: 20em;
height: 5em;
padding: 10px;
border: 2px solid black;
color: white;
background-color: black;
position: absolute;
top: 2em;
left: 2em;
border-radius: 20px;
text-align: center;
vertical-align: baseline;
transition: all 2s ease;
z-index: 2;
display: none;
}

.show {
 display: block;
}

#cursorz {
z-index:1000000;
pointer-events: none;
width: 2rem;
height: 2rem;
will-change: transform;
background: #f1f1f1;
position: absolute;
mix-blend-mode: difference;
border-radius: 50%;

}


}

<script type="text/javascript">
const cursorz = document.getElementById("cursorz");
const moveCursor = event => {
const cursorWidth = cursorz.offsetWidth / 2;
cursorz.style.left = event.pageX - cursorWidth + "px";
cursorz.style.top = event.pageY - cursorWidth + "px";
};
document.addEventListener("mousemove", moveCursor);

setTimeout(function(){
  document.getElementById('mess').classList.add('show');
 }, 5000);

setTimeout(function(){
  document.getElementById('mess').classList.remove('show');
   }, 10000);
</script>

0
Simeon Nenov 10 months 2022-01-19T07:05:55-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse