This a vanilla js plugin that can be used to loop over words with a scramble animation

Overview

Live Site Link - darkidop.github.io/Word-change-with-scramble-effect

Live Site preview

Built with

• Vanilla js
• HTML
• CSS

Usage

1. Download the WordScrambleEffect.min.js file.
2. add the WordScrambleEffect.min.js file to your page using the script (example below)

<script src="./WordScrambleEffect.min.js"></script>

3. add these variables before the script link tag

<script>
  let scrambleEffectDiv = document.getElementById('text-div'),
  wordsArray = ["Graphics Designer", "Web Developer", "Casual Gamer"],
  animationSpeed = 33,
  animationIntervalSpeed = 1800;
</script>

<script src="./WordScrambleEffect.min.js"></script>

Empty example of varible (copy this):

<script>
  let scrambleEffectDiv = document.getElementById(''), // text div id
  wordsArray = [""], // multiple words can be added 
  animationSpeed = 0, // default 0
  animationIntervalSpeed = 0; // default 0
</script>

Author

• Website - darkid.otakulink.net
• Frontend Mentor - @DarkidOP
• Discord - ! Darkid#1060
• Github - @darkidop
• Instagram - @darkidop