I am a beginner in the world of web design. I am currently working on a project where I need to continuously change the text inside a <p> element with a transition effect similar to a slideshow.
Below is the code I have so far:
<p id="qu">Some text</p>
<script>
var i = 0;
function loop(){
var text = ['new text 1', 'new text 2', 'new text 3']
document.getElementById("qu").innerHTML = text[i];
i = (i == 3)?0:i=i+1;
}
setInterval(loop, 1000);
</script>
Although my code is functioning as expected, I'm interested in adding a 'slide in left' transition when the innerHTML is changed. How can I achieve this?