#163 - Text Shuffle On Hover

<!-- 💙 MEMBERSCRIPT #163 v0.1 💙 - TEXT SHUFFLE ON HOVER -->

<script>
(function() {
  // Helper: Shuffle the characters keyword
in a string
  function shuffle(str) {
    var arr = str.split('');
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr.join('');
  }

  // Find all elements with attr
data-ms-code="shuffle-text"
  var elements = document.querySelectorAll('[data-ms-code="shuffle-text"]');

  elements.forEach(function(el) {
    var originalText = el.textContent;
    var interval = null;
    var duration = 600; // ms
    var shuffleSpeed = 50; // ms

    el.addEventListener('mouseenter', function() {
      var start = Date.now();
      clearInterval(interval);
      interval = setInterval(function() {
        if (Date.now() - start > duration) {
          clearInterval(interval);
          el.textContent = originalText;
        } else {
          el.textContent = shuffle(originalText);
        }
      }, shuffleSpeed);
    });

    el.addEventListener('mouseleave', function() {
      clearInterval(interval);
      el.textContent = originalText;
    });
  });
})();
</script>