Elements:Type Effect
Say more in a single space with this eye-catching typewriter effect.
Basics
Simply add an
data-typed='["Sentance to type 1", "Sentance to type 2", "etc"]'
attribute to any element.
<h3 class="fw-normal" data-typed='[ "Tonnes of features", "Bootstrap 5 support", "Powerful Gulp setup", "<strong>AppStrap Bootstrap Theme</strong>", "The ultimate bootstrap theme", "What you waiting for!?!" ]'></h3><div data-typed='["Tonnes of features", "Flexbox support", "The Ultimate Bootstrap 5 Theme", "What you waiting for?"]' data-typed-settings='{"delay":2000, "speed":80,"breakLines":false, "deleteDelay":2400, "doneClass":{"#get-btn":"show"}}' ></div>
<a href="#" class="btn btn-dark fw-bold py-3 px-4 fade mt-3" id="get-btn">Get AppStrap</a>Options
There are various options you can pass as a JSON object via a
data-typed-settings='{SETTINGS}'
attribute on the
data-typed
element.
| Option | Description | Default Value |
|---|---|---|
| strings | (string or array) The string(s) to be typed. | 'Your default string.' |
| delay | (number in millseconds) To wait before typing should start. | 0 |
| doneClass |
Allows a class to be added to elements once typing is complete. Should be a JSON object with
{"#element":"CLASSES"}
|
100 |
| speed | (number in millseconds) The typing speed. | 100 |
| deleteSpeed | (number in millseconds) The deletion speed. If left undefined, will be 1/3 of the type speed. | undefined |
| lifeLike | (boolean) Will make the typing pace irregular, as if a real person is doing it. | true |
| cursor | (boolean) Show a blinking cursor at the end of the string(s). | true |
| cursorSpeed | (number in milliseconds) The blinking speed of the cursor. | 1000 |
| breakLines |
(boolean) Choose whether you want multiple strings to be printed on top of each other (
breakLines: true
), or if you want each string to be deleted and replaced by the next one (
breakLines: false
).
|
true |
| breakDelay |
(number in milliseconds) The amount of time (milliseconds) between line breaks when typing multiple strings. Only effective when
breakLines: true
.
|
750 |
| deleteDelay |
(number in milliseconds) The amount of time (milliseconds) between deleting the current string and typing the next. Only effective when
breakLines: false
.
|
750 |
| startDelete | (boolean) Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions. | false |
| startDelay | (number in milliseconds) The amount of time before the plugin begins typing after initalizing. | 250 |
| loop | (boolean) Have your string or strings continuously loop after completing. | false |
| loopDelay | (number in milliseconds) The amount of time between looping over a string or set of strings again. | 750 |
| html | (boolean) Handle strings as HTML, which will process tags and HTML entities. If 'false,' strings will be typed literally. | true |
| callback | (function) A function that executes after your typing has completed. | nuthin' |
Examples
Effect overwrites itself after a 10 second wait to start.
<h3 class="fw-normal" data-typed="'["Tonnes" of features support ultimate bootstrap theme you waiting for data-typed-settings="'{"delay":10000,"></h3>Triggers button to show when typing is finished (starts after 15 seconds).
<h3 class="fw-normal" data-typed="'["Tonnes" of features support ultimate bootstrap theme you waiting for data-typed-settings="'{"delay":15000," fadein></h3>
<a href="#" class="btn btn-dark btn-rounded btn-lg text-uppercase fw-bold py-3 px-4 animate-pending mt-3" id="get-btn">Get AppStrap <i class="fa fa-rocket"></i></a>