Shuffle Letters Effect In Pure JavaScript – shuffle-letters.js

Preview:

Description:

shuffle-letters.js is a lightweight, dependency-free JavaScript library that allows you to print text with a typing animation by shuffling the text letter by letter.

How to use it:

Insert the shuffle-letters.js library into the document when needed.

<script src="shuffle-letters.js"></script>

Shuffle the text specified in the JavaScript.

shuffleLetters(document.querySelector('.container'), {
  text: 'Lorem ipsum dolor sit amet.'
});

Shuffle the text wrapped in a specific container.

<p class="demo" hidden>Lorem ipsum dolor sit amet</p>

var third = document.querySelectorAll('.demo');
    for (var i = 0; i < third.length; i++) {
      third[i].hidden = false;
    }
shuffleLetters(third);

Customize the text shuffle effect.

shuffleLetters(document.querySelector('.container'), {
  text: 'Lorem ipsum dolor sit amet.'
  step: 1, // How many times should the letters be changed
  fps: 15 // Frames Per Second
});