Typed Basic
Welcome!
<h2>Welcome!
<span data-typed='{
"strings" : ["<a href=\"#\">Modular</a>","modern","highly customizable"],
"typeSpeed" : 40,
"backSpeed" : 30,
"backDelay" : 700,
"smartBackspace": true,
"shuffle" : false,
"loop" : "infinite",
"loopCount" : 9999,
"showCursor" : true,
"cursorChar" : "|"
}'></span>
</h2>
<!-- Vendor : Typed -->
<script src="../assets/vendors/typed.js/lib/typed.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll("[data-typed]").forEach(function(el) {
let conf = el.getAttribute('data-typed');
conf = conf ? JSON.parse( conf ) : {};
new Typed(el, Object.assign({ cursorChar: "|" }, conf));
});
});
</script>
Typed Placeholder
<!-- input placeholder -->
<input type="text" class="form-control"
data-typed='{
"strings" : ["modular","modern","highly customizable"],
"typeSpeed" : 15,
"backSpeed" : 1,
"backDelay" : 700,
"smartBackspace": true,
"shuffle" : false,
"loop" : "infinite",
"loopCount" : 9999,
"showCursor" : false,
"attr" : "placeholder",
"bindInputFocusEvents": true
}'>
<!-- textarea placeholder -->
<textarea class="form-control typed"
data-typed='{
"strings" : ["modular","modern","highly customizable"],
"typeSpeed" : 15,
"backSpeed" : 1,
"backDelay" : 700,
"smartBackspace": true,
"shuffle" : false,
"loop" : "infinite",
"loopCount" : 9999,
"showCursor" : false,
"attr" : "placeholder",
"bindInputFocusEvents": true
}'></textarea>