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 |