Shining text

by Trina Lu

HTML

<div class="shine">
  i will shine!!!!!!
</div>

CSS

.shine{
  background:#000;
  padding:10px;
}
.sparkle{
  color:#fff;
  /* text-shadow:0 0 4px #878787,0 0 4px  #878787,0 0 4px; */
}
.sparkle.active {
  /* color: #ffeb3b; */
  text-shadow:0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787,0 0 4px #878787;
}

JavaScript

function shineText(selector) {
  var $sparkles = prepare_sparkles(selector);
  var i = 0;
  function prepare_sparkles(selector) {
    var $div = $(selector);
    var text = $div.text();
    var newText = [];
    var space = /\s+/;
    for (i in text) {
      if (space.test(text[i])) {
        newText.push(text[i]);
      } else {
        newText.push("<span class='sparkle'>" + text[i] + "</span>");
      }
    }
    newText.push("<span class='sparkle'></span>");
    $div.html(newText.join(''));
    return $('.sparkle');
  }
  function loop() {
    $($sparkles[i]).addClass('active').siblings().removeClass('active');
    if (i < $sparkles.length) {
      i++
      setTimeout(loop, 50);
    } else {
      i = 0;
      setTimeout(loop, 2000);
    };
  }
  loop();
}

shineText('.shine');