Scramble Text

Instructions

Overview

Add eye-catching text scramble animations to your website with customizable triggers, durations, and character sets.

Getting Started

Quick Start

1. Click the Copy Component button on the top of the page.
2. Paste the component into your Webstudio site.

Manual Start

1. Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Scramble%20Text/scramble-text-v1.1.js"></script>[/code-block]

2. Add the Attribute: Add the dv-scramble-text attribute to any text element you want to animate: <p dv-scramble-text="auto duration-300">Your text here</p>

Customization Options

Trigger Types

• Use these options in the dv-scramble-text attribute:
  • auto = Animates immediately when loaded
  • click = Animates when clicked
  • hover = Animates when hovered
  • inview = Animates when the element comes into view
• Example: dv-scramble-text="click"

Animation Settings

• duration-X = Animation duration in milliseconds (default: 300)
• speed-X = Speed between character changes in milliseconds (default: 30)
• stagger = Randomizes the completion time of each character
• loop-X = Repeats the animation every X milliseconds
• delay-X = Delays the animation start by X milliseconds
• Example: dv-scramble-text="auto duration-500 speed-20 stagger loop-3000"

Custom Characters

• Use the dv-scramble-text-chars attribute to define custom scramble characters
• Example: dv-scramble-text-chars="01!@#$%"
• Default characters: [.break-word]#_+/\\[]{}=*ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz[.break-word]

Notes

• Spaces in text are preserved during animation
• Multiple settings can be combined in a single attribute
• The animation respects the original text length and formatting