<script src="jquery.js"></script> <script src="typing.min.js"></script> <script> $(function(){ $("#div").typing({ sentences: ["First sentence.", "Second sentence."] }); }); </script> ... <div id="div"></div>
Result:
Do not forget to add CSS:
.typing.type .typing-wrapper { vertical-align: top; overflow: hidden } .typing.type .typing-wrapper::after { content: ''; position: absolute; right: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 90%; width: 1px; background-color: #aebcb9 } .typing.type .typing-wrapper.waiting::after { -webkit-animation: cd-pulse 1s infinite; -moz-animation: cd-pulse 1s infinite; animation: cd-pulse 1s infinite } .typing.type .typing-wrapper.selected { background-color: #93a4aa } .typing.type .typing-wrapper.selected::after { visibility: hidden } .typing.type .typing-wrapper.selected b { color: #364347 } .typing.type b { visibility: hidden } .typing.type b.is-visible { visibility: visible; font-style: normal } .typing.type i { position: absolute; visibility: hidden; font-style: normal } .typing.type i.in { position: relative; visibility: visible; font-style: normal }
Another example:
<script src="jquery.js"></script> <script src="typing.min.js"></script> <script> $(function(){ $('#div-two').typing({ text: { before: 'Text before: ', after: ' and text after.' }, sentences: ['first sentence', 'second sentence'] }); }); </script> ... <div id="div-two"></div>
Result: