08 - Say Hello to ...Spread and ...Rest/jumping-letters-ANSWER.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The ...Spread Operator</title>
  <style>
    body {
      min-height: 100vh;
      font-family: sans-serif;
      background: #ffc600;
      text-transform: uppercase;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
      color:white;
      text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
    }
    .jump span {
      position: relative;
      display: inline-block;
      transition: transform 0.1s;
      cursor:url('http://csscursor.info/source/santahand.png'), default;
    }
    .jump span:hover {
      transform:translateY(-20px) scale(2) rotate(10deg);
      z-index: 1;
    }
  </style>
</head>
<body>
  <h2 class="jump">SPREADS!</h2>

<script>
  const heading = document.querySelector('.jump');
  heading.innerHTML = sparanWrap(heading.textContent);

  function sparanWrap(word) {
    return [...word].map(letter => `<span>${letter}</span>`).join('');
  }
</script>
</body>
</html>