<h1>Once upon a time, not so long ago, there lived a shark named Simon and a dolphin named Dudley. </h1>

@import url('https://fonts.googleapis.com/css?family=Archivo:400,700');

body {
  font-family: 'Archivo'; 
  font-weight: bold;
  margin: 100px;
}

h1 {
  font-size: 5vw;
  cursor: cell;
  text-align: center;
  line-height: 5.5vw;
}

h1 span {
  transition: color 3s;
  transition-delay: 1s;
  letter-spacing: -0.2vw;
}

h1 span:hover {
  transition: color 0s;
}

h1 span:nth-child(1n):hover {
  color: #9875E0;
}

h1 span:nth-child(2n):hover {
  color: #53FBDD;
}

h1 span:nth-child(3n):hover {
  color: #00A4DD;
}

function _toArray(arr) { 
  return Array.isArray(arr) ? arr : Array.from(arr)
}

function makeSpans (selector) {
  var _document$querySelect = document.querySelectorAll(selector)
  var _document$querySelect2 = _toArray(_document$querySelect)
  var elements = _document$querySelect2.slice(0)
  
  return elements.map(function (element) {
    var text = element.innerText.split('')
    var spans = text.map(function (letter) {
      return '<span>' + letter + '</span>'
    }).join('')
    return element.innerHTML = spans
  })
}

makeSpans('h1')