JSFiddle - React, Tailwind, and code Playground
HTML
<h3>if you miss the action ,please reload the page</h3>
<p id='myp'>the earth moves round the sun</p>
CSS
#myp{
display:none;
}
JavaScript
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=1000-(Math.floor(Math.random()*10)+50);
ids.push(m.id);
var style='position:absolute;left:'+left+'px;top:'+top+'px;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;
0
g.style.transform="rotate(360deg)";
time+=50;
}
},1000);
}
window.onload=init;