TypeWriter &

Create 'typing' text quickly and easily.

Usage

Add data-f-typewriter to an element to have the text inside hidden by default and then appear letter by letter with your choice of animation. You can also use a toggle to initialise the effect.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores a minima blanditiis. Explicabo repellat suscipit tempore libero, quae doloremque consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores a minima blanditiis. Explicabo repellat suscipit tempore libero, quae doloremque consectetur!

Markup


<!-- The heading at the top of this page -->
<h1 data-f-typewriter="{ animation: 'f-animation-scale-up-over' }">TypeWriter</h1>

<!-- The paragraph above -->
<p data-f-typewriter="{ toggle : '#toggle-me', animation : 'f-animation-fade', typespeed : 20 }">...</p>
<p><button id="toggle-me" class="f-btn">...</button></p>
<p data-f-typewriter="{ toggle : '#toggle-no', typespeed : 40, delay : 1000, cursor : true }">...</p>
<p><button id="toggle-no" class="f-btn">...</button></p>

Scrollspy

You can auto-initalise the typewriter using the scrollspy component.

Example

This is in view, and repeats

 

 

This is in view after 200px extra scrolling

Markup

<h1 data-f-typewriter="{ animation: 'f-animation-scale-up-over', scrollspy : true }">This</h1>

JavaScript Options

Option Possible value Default Description
animation string false Add class from animation component
cursor boolean false Show a cursor
delay integer 0 Delay the effect (milliseconds)
toggle string false Selector of an element that triggers the effect
typespeed integer 350 The speed that each letter shows (milliseconds)

Init element manually

var objTypewriter = FatKit.typewriter(element, { /* options */ });

Events

Name Parameter Description
before.f.typewriter typewriter object Before any letters start showing but after initalisation
complete.f.typewriter typewriter object Once all letters have finished showing
fatkit