Lightweight Text Scrambling JavaScript Plugin – scrambling-letters

Preview:

Description:

scrambling-letters is a lightweight, standalone JavaScript plugin to reveal text with a random scrambling effect.

How to use it:

Add the ‘data-scrambler’ attribute to the target text.

<p data-scrambler>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi sem, convallis id elit vel, efficitur tincidunt eros. Sed iaculis lectus at lacus faucibus, nec ultricies arcu hendrerit. Quisque vehicula iaculis imperdiet. Donec sagittis iaculis eros ac dapibus. Quisque facilisis commodo nisi, a aliquet nunc varius vitae. Ut porttitor sed justo vel fringilla. Cras lacinia gravida orci. Nam neque diam, egestas nec feugiat non, aliquet id lorem. Pellentesque malesuada iaculis arcu, sed pharetra nisl luctus vitae. In hac habitasse platea dictumst. Quisque turpis purus, tristique quis ligula ut, condimentum tempus libero. Vivamus eget eros id magna hendrerit semper. In blandit ipsum non est fermentum, non pretium nulla fermentum. Proin nec justo id erat rhoncus ultrices.
</p>

Add the main JavaScript file ‘scramble.js’ to the bottom of the webpage.

<script src="js/scramble.js"></script>

That’s it. The plugin will automatically scramble the text on page load. You can also create a button to trigger the text scrambling effect manually.

<button id="scramble-button"> Scramble it</button>

Possible parameters:

Scrambler({
  target: '[data-scrambler]',
  random: [1000, 3000],
  speed: 100,
  text: 'Hello World'
})

Changelog:

06/11/2019

• v1.5.2: hotfix

05/29/2019

• v1.4.2: adding new scramble class

05/18/2019

• v1.4.1: bugfix

01/08/2019

• Cleanup