html – Text typing animation

Question:

I have a DIV tag with text inside. Is it possible to change the text content in a loop with a print effect where it comes out and then goes backwards, deleting letters and starting over with new text? Is this possible with jquery ?

Question translation: typing animated text @Erik

Answer:

Pretty simple solution:

var $typer = $('.typer'),
    txt = $typer.data("text"),
    tot = txt.length,
    ch  = 0;

(function typeIt() {   
  if(ch > tot) return;
  $typer.text( txt.substring(0, ch++) );
  setTimeout(typeIt, ~~(Math.random()*(300-60+1)+60));
}());
/* PULSATING CARET */
.typer:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  width:1px;
  height:1em;
  background: #000;
  animation: caretPulsate 1s linear infinite; 
  -webkit-animation: caretPulsate 1s linear infinite; 
}
@keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}
@-webkit-keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="typer" data-text="Привет! Моё имя Al. Я проведу вас через весь процесс установки приложения."></span>

So basically jQuery gets your element's data-text , adds character by character, and the pulsating dash ("caretPulsate") is something animated with CSS3 :after on the SPAN element.

Translation of the answer: typing animated text @Roko C. Buljan

Post Views: 5
Scroll to Top