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