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)
repeat boolean false repeat the animation

Init element manually

let 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