For a production demo see my website: www.pbr.plus
// in your *.js file
new Typedtext({
content: [{text: "This is Typedtext.js!"}]
})
.run();<!-- in your *.html -->
<div>
<span id="sentence"></span><span id="cursor"></span>
<!-- element id's can optionally be changed in config -->
</div>
Download the latest Typedtext.js file from the Releases section here: https://github.com/Criomby/typedtext.js/releases
In your .html file:
<script src="typedtext.js"></script>Basic custom configuration setup example
new Typedtext({
elementSentenceId: "your-sentence-element",
elementCursorId: "your-cursor-element",
content: [{text: "This runs infinitely at creation."}],
textColor: "red"
})
.run();Start / stop the animation loop manually (e.g. using a button click event)
var tt1 = new Typedtext({
elementSentenceId: "your-sentence-element",
elementCursorId: "your-cursor-element",
content: [{text: "If you see this the animation runs."}],
textColor: "green"
})
// currently shows blinking cursor only
// start animation loop
tt1.run();
// stop animation (completes current typing-delete cycle and stops after delete)
tt1.stop();
// blinkig cursor...Type / delete content just once
// config
var tt2 = new Typedtext({
elementSentenceId: "your-sentence-element-2",
elementCursorId: "your-cursor-element-2",
textColor: "green"
})
// type text
tt2.type({
text: "I am going to sit here."
});
// shows text permanently now
// delete text
tt2.delete();
// blinkig cursor...
// repeat as necessary
tt2.type({
text: "New text typed."
});
// ...
// tt2.delete();
// you get the ideaSee if animation is running currently on an object
var running = tt1.isRunning(); // returns boolean valuerunning is either `true or false depending on whether .run() has been called yet (or has been stopped w/ .stop())
▫️ configure all possible options
Create your ultimate custom config
// Ultimate Custom Config of Typedtext (ucctt)
var ucctt = new Typedtext({
elementSentenceId: "sentElm",
elementCursorId: "cursElm",
cursor: "█",
cursorColor: "black",
textColor: "black",
permaBlink: false,
staticCursor: true,
blinkSpeed: 0.5,
content: [
{
text: "This is Typedtext.js!",
color: "#ADA2FF",
cursor: ";",
cursorColor: "purple",
timeout: 2000
},
{
text: "Keep it running...",
color: "black",
cursor: "X",
cursorColor: "#82AAE3",
timeout: 2000
},
{
text: "Another one...",
color: "#DC0000",
cursor: "I",
cursorColor: "#850000",
timeout: 2000
}
],
delay: 150,
delayAfter: 2000,
deleteSpeed: 50,
printConfig: true,
varSpeed: true,
varSpeedPercentage: 0.6,
typos: true,
typosProb: 0.15,
typosDelayMultiplier: 4,
underline: false,
selectable: false
});
// ucctt.run();(The values seen here are the default values if not overwritten by user config)
{
/**
* @property {string} elementSentenceId: ID of element where the content will be typed
*/
elementSentenceId: "sentence",
/**
* @property {string} elementCursorId: ID of element where the cursor will be shown
*/
elementCursorId: "cursor",
/**
* @property {string} cursor: character used as cursor
*/
cursor: "|",
/**
* @property {string} cursorColor: default cursor color
*/
cursorColor: "black",
/**
* @property {string} textColor: set global text color for content
*/
textColor: "black",
/**
* @property {boolean} permaBlink: true: cursor blinks, even when typing
*/
permaBlink: false,
/**
* @property {boolean} staticCursor: true: cursor does not blink at any time
*/
staticCursor: false,
/**
* @property {number} blinkSpeed: time interval cursor blinking in seconds
*/
blinkSpeed: 0.6,
/**
* @property {array} content: array containing typeof contentObj (see below) with content to be typed and the respective options
*/
content: [
{
text: "This is Typedtext.js!", // required
color: "black", // optional: font color
cursor: "|", // optional: cursor for individual word
cursorColor: "blue", // optional: cursor color for word
timeout: 2000 // optional: (additional to delayAfter) timeout after word has been typed
},
// add as many more as you like!
],
/**
* @property {number} delay in ms between chars typed
*/
delay: 100,
/**
* @property {number} delayAfter: delay in ms after a content object has been typed / deleted and before it is deleted / the next is typed
*/
delayAfter: 1500,
/**
* @property {number} deleteSpeed: delete speed of single chars in ms
*/
deleteSpeed: 100,
/**
* @property {boolean} printConfig: prints config to console
*/
printConfig: false,
/**
* @property {boolean} varSpeed: varies typing speed between chars by +-60ms so typing looks more natural instead of linear speed
*/
varSpeed: false,
/**
* @property {number} varSpeedPercentage: 0% - 100% by how much typing speed varies (how much "delay" varies)
*/
varSpeedPercentage: 0.5,
/**
* @property {boolean} typos: makes typos while typing as per the defined probability
*/
typos: false,
/**
* @property {number} typosProb: Probability in percent for a typo per char
*/
typosProb: 0.1,
/**
* @property {number} typosDelayMultiplier: How much larger the delay is after the typo has been made and until it gets corected
*/
typosDelayMultiplier: 3.5,
/**
* @property {boolean} underline typed text
*/
underline: false,
/**
* @property {boolean} selectable: target html elements are text selectable / highlightable
*/
selectable: true
}