Typing Text
Complete APi to create typing text and style the typing text as well, as per your preference.
WoodPecker lets you add Typing Text easily.
It's Very intelligent and types out only the difference in the strings.
See the demo in next typed string.
Typing text is Simple To Implement
Typing text is SEO Friendly
Typing text is Intelligent
<div class = "col-lg-12 my-5 wdpk-typing-text">
<div id = "typed-strings">
<h2>WoodPecker lets you add <strong>Typing Text</strong> easily.</h2>
<h2>It's Very <em>intelligent</em> and types out only the difference in the strings.</h2>
<h2>See the demo in next typed string.</h2>
<h2>Typing text is <mark>Simple To Implement</mark></h2>
<h2>Typing text is <mark>SEO Friendly</mark></h2>
<h2>Typing text is <mark>Intelligent</mark></h2>
</div>
<span id = "wdpk-type-text"></span>
</div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery("#wdpk-type-text").length !== 0) // Laods the JS only of the element exists
{
let obj = {
selector: '#wdpk-type-text', // Selector for trigger (must be a valid css selector)
smartBackspace: true, // Default value
stringsElement: '#typed-strings', // Div that contains the text to be typed
typeSpeed: 50, // Typing Speed higher the slower
startDelay: 1000, // Delay before the typing starts
backSpeed: 50, // Speed for backspace the higher the slower
backDelay: 3000, // Delay after which the backsspace starts
fadeOut: false, //Fade out instead of backspace
fadeOutClass: 'class-name', //css class for fade animation
fadeOutDelay: false, //Fade out delay in milliseconds
contentType: 'html',
};
require(["app/shortcodes/wdpkTypeText"], function (e)
{
e.publicCall(obj);
});
}
});
WoodPecker® is a modular design system crafted to make creating layouts easy for the developers. Now instead of fucussing on the low level detail of developing these modules, you can simple use the existing modules to create fantasstic layouts.