HTML/CSS/JS - Wie kann ich Text mit einem setInterval ändern?

Question

Ich versuche, etwas neu zu erstellen, wie Sie auf https://www.sketchapp.com/ sehen können, in der Mitte der Seite ändert sich der Text automatisch (Sketch ist für UX-Designer wie Sie gemacht). Ich habe ein wenig gesucht, konnte aber nicht genau herausfinden, wie ich sowas machen soll. Das ist, was ich habe, wenn es jemanden gibt, der mir helfen kann, das wäre toll, Danke!

document.addEventListener('DOMContentLoaded', function(){ 
 
    setTimeout(function(){ 
 
    var div = document.getElementById('js-text'); 
 
    div.innerHTML = "Replaced <span class='redText'>Text</span>"; 
 
    }, 1000); 
 
});

.redText{ 
 
    color: red; 
 
}

<div id="js-text">Initial Text</div>

Answer 1

Wie über diese Lösung. Ich hoffe es hilft!

$(document).ready(function(){ 
 
    $("#test").html("<div>"+ 'Sketch is made for UI designers like you'+"</div>").fadeTo(100, 0.1).fadeTo(200, 1.0); 
 
    var str = ""; 
 
    var number = 1; 
 
    var timer = setInterval(function() { 
 
    if(number == 0){str = "Sketch is made for" +'<span class = "myClass"> UI </span>' + "designers like you"} 
 
    if(number == 1){str = "Sketch is made for" +'<span class = "myClass"> UX </span>' + "designers like you"} 
 
    else if(number == 2){str = "Sketch is made for"+'<span class = "myClass"> web designers </span>'+ "like you"} 
 
    else if(number == 3){str = "Sketch is made for" + '<span class = "myClass"> mobile designers </span>'+ "like you"} 
 
    $("#test").html("<div>"+ str+"</div>").fadeTo(100, 0.1).fadeTo(200, 1.0); 
 
    ++number; 
 
    if(number == 4){ 
 
     number = 0; 
 
    } 
 
    }, 2000); 
 
});

.myClass{ 
 
    background: purple; 
 
    color: #ffffff; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id = "test"> 
 
</div>