Random Fade elements Vanilla JS

by Kevin Van Lierde

HTML

<p id ="changingP">
<span>Want </span><span>to </span><span>get </span><span>in</span><span> contact</span><span> with </span><span>me</span><span>?</span><br /><span>Email</span><span>: </span><span>edit</span><span>.</span><span>ed</span><span>email</span><span>@</span><span>gmail</span><span>.</span><span>com</span><br /><span>Link</span><span>edI</span><span>n</span><span>: </span><span>http</span><span>s://w </span><span></span><span>ww.</span><span>lin</span><span>kedi</span><span>n.com</span><span>/</span><span>in/</span><span>edit</span><span>ed</span><span>email</span>
</p>

CSS

span { opacity : 0; }

JavaScript

var $spans = document.getElementsByTagName('span');

function randomFade(elements) {
  var shownCount = 0,
      indexes = [];
  function appear(el) {
    setTimeout(function() {
      var count = 10, i = setInterval(function() {
        el.style.opacity = (parseFloat(el.style.opacity) || 0) + 0.1;
          if (!count--) 
             clearInterval(i);
        }, 50);
    }, shownCount++*200); 
  }
  function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), 
      x = o[--i], o[i] = o[j], o[j] = x);
    return o;
  };
  for (var i = elements.length; i--;) indexes.push(i);
  indexes = shuffle(indexes);
  for (var f = indexes.length; f--;) appear(elements[indexes[f]]);
}

randomFade($spans);