Trying to do random position with Animated text

Question

I have a text that is in an array and loops through the array and displays it.

What I am trying to do is get the text to change position at random within the set interval.

I created a setinterval that lets the array go through each text evevry 5 seconds, I am just not sure if I am on the right track regarding the position changing every 5 seconds as well.

let textElement = document.querySelector("p")

let textArray = [
  "Are you looking for a quick learner?",
  "Someone who is ever evolving?",
  "Someone who strives to improve their knowledge?",
  "Someone who loves problem-solving and finding solutions?",
  "Someone who has the tenacity to succeed?"
]


const randomPos = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

let index = 0;
textElement.innerText = textArray[index]

setInterval(() => {
  index = (index + 1) % textArray.length
  textElement.innerText = textArray[index]
    textElement.style.left = randomPos(0, 300 - 200) + "px";
    textElement.style.top = randomPos(0, 300 - 200) + "px";
}, 5000)

.background {
  background: var(--light--colour);
  height: 88.4vh;
}

p {
  height: 2em;
  position: absolute;
  font-size: 32px;
  color: var(--darkest--colour);
  width: 12em;
  animation: slidesdown 5s ease infinite;
  margin-top:-8em;
  height:7em;
  margin-left: 10em;
}

@keyframes slidesdown {
  0%,
  50% {
    transform: translate(0, 0em);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 1em);
    opacity: 0;
  }
}

Trying to do random position with Animated text

0 Answers