Scrambling-Decoding-Text-Effect

JavaScript Library To Add Scrambling/Decoding Effect To Your Text | Scrambling Letters

by

Scrambling Letters is a lightweight JavaScript library for scrambling letters within a piece of text, giving a nice decoding effect.

It cycles through any elements with a delimiter or related data attribute and shuffles the characters randomly for a few seconds before returning them one by one to their original state or alternate string.

text scramble effect, decoding text animation, gsap scramble text, canvas text animation effects, text transform effect download, shattering text animation css, text animation examples

Why Scrambling Letters?

  • Vanilla JS with no dependencies.
  • Simple but powerful configuration options.
  • Support for targeting multiple text sections independently.
  • Multiple bundle versions available – UMD, ESM, IIFE & CJS.

How to make use of it:

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

<p data-scrambler="">
 A lightweight javascript library for adding a scrambling/decoding effect to your text.
</p>

Add the principle JavaScript file ‘scramble.js’ to the underside of the webpage.

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

The plugin will mechanically scramble the textual content on the web page load.

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

Possible parameters:

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

Lightweight Text Scrambling JavaScript Plugin, Scrambling/Decoding Effect For Text, Javascript Text Scramble Effect, text color fill animation css

See Demo And Download

Demo
Download

Official Website(Recidvst): Click Here

This superior jQuery/javascript plugin is developed by Recidvst. For extra Advanced Usages, please go to the official website.

Leave a Comment