Simple and awesome jQuery plugin

Examples and usage

Installation

<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: