I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locations and sits in the correct order. However, instead of the desired effect, each word is appearing from lower positions to upper positions. How can I achieve the effect I want? Please assist me!
Visit this jsfiddle for reference.
<html>
<head>
<style>
#myp{
display:none;
}
</style>
</head>
<body>
<h3>If you miss the action, please reload the page.</h3>
<p id='myp'>The earth moves round the sun.</p>
<script>
var para;
var para_array=[];
var string;
var splits;
var ids=[];
var m;
var time=10;
k=50;
function init(){
para=document.getElementById('myp');
string=para.innerHTML.toString();
splits=string.split(' ');
for(i=0;i<splits.length;i++){
para_array.push(splits[i]);
}
for(i=0;i<para_array.length;i++){
m=document.createElement('span');
var id='span'+i;
m.setAttribute('id',id);
var left=window.innerWidth-(Math.floor(Math.random()*900)+800);
var top=window.innerHeight-(Math.floor(Math.random()*400)+50);
ids.push(m.id);
var style='position:absolute;left:'+left+';top:'+top+';color:red;margin-right:30px;opacity:0;display:block;transition:all 1s ease-in-out;'
m.setAttribute('style',style);
m.innerHTML=para_array[i];
document.body.appendChild(m);
k+=70;
}
var t=setTimeout(function(){
for(i=0;i<para_array.length;i++){
var g=document.getElementById('span'+i);
g.style.top="200px";
g.style.left=150+time+"px";
g.style.opacity=1;
g.style.transform="rotate(360deg)";
time+=50;
}
},100);
}
window.onload=init;
</script>
</body>
</html>