Skip to content

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"]' or data-typed="Single sentance" attribute to any element.

View code example
<h3 class="font-weight-normal" data-typed='["Tonnes of features", "Flexbox support", "The Ultimate Bootstrap 4 Theme", "What you waiting for?"]'></h3>


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.

View code example
<h3 class="font-weight-normal" data-typed='["Tonnes of features", "Flexbox support", "The Ultimate Bootstrap 4 Theme", "What you waiting for?"]'
	      data-typed-settings='{"delay":10000, "speed":120,"breakLines":false, "deleteDelay":1400}'>
</h3>

Triggers button to show when typing is finished (starts after 15 seconds).

View code example
<h3 class="font-weight-normal" data-typed='["Tonnes of features", "Flexbox support", "The Ultimate Bootstrap 4 Theme", "What you waiting for?"]'
  data-typed-settings='{"delay":15000, "speed":120,"breakLines":false, "deleteDelay":1400, "doneClass":{"#get-btn":"animated fadeIn"}}'>
</h3>
<a href="#" class="btn btn-inverse btn-rounded btn-lg text-uppercase font-weight-bold py-3 px-4 animate-pending mt-3" id="get-btn">Get AppStrap <i class="fa fa-rocket"></i></a>

Get AppStrap

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.