0

How to make typing effect in jquery that only animate elements that are currently shown at screen (since the html file contains many elements but most will be hidden and only some be visible one at a time within one Scene <span id>) with <h1> shown first with only fadeIn animation, then after ones finished, the first <p> shown with typing animation, then followed with the next <p> after (and then also third, four, five paragraph if they are exist)?

<!-- 1. Scene: #dense-jungle brought to the screen -->
<span id="dense-jungle">

<!-- 2. <h3> fadeIn -->
<h3>Dense Jungle</h3>

<!-- 3. The first <p> gets texted with typing/typewriter animation -->
<p>The jungle is so green.</p>

<!-- 4. The next <p> gets texted after the first -->
<p>There is a path.</p>

<!-- 5. And if another followed <p> does also exist in the scene -->

</span>
Woobie
  • 95
  • 7
  • Does this answer your question? [How to simulate typing in input field using jQuery?](https://stackoverflow.com/questions/13944835/how-to-simulate-typing-in-input-field-using-jquery) – Charlie Bamford Aug 26 '20 at 19:33
  • No, that is for user input, not html article story content. – Woobie Aug 27 '20 at 21:24

1 Answers1

0

I found that with this, you can set a different style to on screen elements (using CSS). But i needing for typewrite effect that queueing typing animations for paragraphs and not this what does breaking words’ structure.

In CSS: .span-0{display: block;position: relative;-webkit-transform: rotate(-1deg);} .span-1{display: block;position: relative;-webkit-transform:scale(1.11) translateY(0.02em)rotate(2deg);} .span-2{display: block;position: relative;-webkit-transform:translateY(-0.04em)rotate(0deg);}

Using JS:

var processTextNodes = function(element, fn){
var children = element.childNodes;
for (var i = children.length; i --> 0;){
var node = children[i];
var type = node.nodeType;
if (type == 1) processTextNodes(node, fn);
if (type == 3) fn.call(this, node);
}
}

// Styling p>span divided into 20 section
$(function(){
$("p").each(function(){
processTextNodes(this, function(node){
var txt = node.nodeValue.replace(/\s+/g, '‎‎‎ ').split('');
var spans = [];
while (txt.length){
var tempAr = [];
tempAr[tempAr.length] = txt.shift();
var charsFound = (tempAr[tempAr.length - 1] !== " ");
while (txt[0] === " "){
tempAr[tempAr.length] = txt.shift();
}
if (!charsFound){tempAr[tempAr.length] = txt.shift();}
spans[spans.length] = tempAr.join("");
}
var parent = node.parentNode;
for (var i = 0, len = spans.length; i < len; i++ ){
var span = spans[i];
parent.insertBefore($('<span class="added">' + span + '</span>')[0], node);
}
parent.removeChild(node);
});
$("span.added", this).each(function(index){
$(this).addClass("span-" + (index % 20));
});
});
});
Woobie
  • 95
  • 7