Typed JS

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>
<div class="first">
  <span id="typed" style="white-space:pre;"></span>
</div>
<br/>
<div class="second">
<span id="typedFirst" style="white-space:pre;"></span>
</div>

CSS

.first > span,.second > span{
  text-transform: uppercase;
}
.typed-cursor {
  display:none;
  opacity: 1;
  font-weight: 100;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JavaScript

$(document).ready(function(){
  var typed = new Typed('#typed', {
      strings: ['HELLO SOCIAL ARE EXPERTS'],
      typeSpeed: 50,
      backSpeed: 20,
      startDelay: 0,
      loop: false,
      loopCount: Infinity,
      preStringTyped: function(){
      	$(".first .typed-cursor").show(); 
      },
      onStringTyped: function() { 
      	$(".first .typed-cursor").hide(); 
      }
    })
    
   var typed1 = new Typed('#typedFirst', {
      strings: ["in social media strategy", "influencer marketing", "facebook advertising", "community management", "content strategy", " instagram marketing"],
      typeSpeed: 50,
      backSpeed: 50,
      startDelay: 1500,
      loop: true,
      loopCount: Infinity,
      preStringTyped: function(){
      	$(".second .typed-cursor").show(); 
      }
    }) 
})