CODEWITHSUNDEEP
javascripthtmlcss
AL-zami
AL-zami

Reputation: 9066

split the words of a paragraph and put individual words inside seperate span element and animate them

i have a paragraph element which has display property hidden.I split each of that paragraph words and put them inside individual span element.Then i want to give them some effects which involves each word will come from different locations and sit in correct order.But here each word is not showing such effect rather they arise from lower position to upper positions.how can i achieve the effect i am hoping for?please help me out!!!

jsfiddle

<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.round()*900)+800);
    var top=window.innerHeight-(Math.floor(Math.round()*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>

Upvotes: 0

Views: 261

Answers (2)

clifdensprit
clifdensprit

Reputation: 4901

gaurav5430 already answered your question. I just wanted to offer some cleaned up code for you. Also altered your jsfiddle to make the words evenly spaced.

http://jsfiddle.net/R92f9/2/

var para = document.getElementById('myp');

function init(target){
    var words = para.innerHTML.toString().split(' ');
    var spans = [];
    var left = window.innerWidth-(Math.floor(Math.random()*900)+800);
    var top = 1000-(Math.floor(Math.random()*10)+50);
    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;';
    var wordSpacing = 10;

    for(var i=0; i<words.length; i++){

        var span = document.createElement('span');

        span.setAttribute('style', style);
        span.innerHTML = words[i];
        document.body.appendChild(span);

        spans.push(span);

    }

    var t=setTimeout(function(){

        var currentLeft = 150;

        for(var i=0; i<spans.length; i++){
            var span = spans[i];

            span.style.top       = "200px";
            span.style.left      = currentLeft+"px";
            span.style.opacity   = 1;
            span.style.transform = "rotate(360deg)";

            currentLeft += span.offsetWidth + wordSpacing;

        }

    },1000);
}

window.onload=function(){init(para, 10);};

Upvotes: 1

gaurav5430
gaurav5430

Reputation: 13892

you forgot to append 'px' to your top and left values:

var style='position:absolute;left:'+left+';top:'+top+';color:red;margin-right:30px;opacity:0;display:block;transition:all 1s ease-in-out;'

should be :

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;'

also , i believe you wanted to have Math.random instead of Math.round

updated fiddle: http://jsfiddle.net/gaurav5430/R92f9/1/

Upvotes: 1

Related Questions