仅在屏幕场景和一个又一个元素中键入动画（jQuery）

Posted 2023-04-18

【中文标题】仅在屏幕场景和一个又一个元素中键入动画（jQuery）

【英文标题】：Typing Animation Only On-Screen Scene And One element After Another (jQuery)

【发布时间】：2020-12-15 15:49:38

【问题描述】：

如何在 jquery 中制作仅对当前显示在屏幕上的元素进行动画处理的打字效果 （因为 html 文件包含许多元素，但大多数元素将被隐藏，并且在一个场景 中一次只能看到一些元素）其中

首先显示只有淡入淡出动画，然后在完成后，第一个

显示打字动画，然后是下一个

（如果存在的话，还有第三、四、五段）？

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

【问题讨论】：

这能回答你的问题吗？ How to simulate typing in input field using jQuery?

不，那是供用户输入的，不是html文章故事内容。

【参考方案1】：

我发现有了这个，您可以为屏幕元素设置不同的样式（使用 CSS）。但是我需要打字效果来排队输入段落的动画，而不是破坏单词的结构。

在 CSS 中： .span-0显示：块；位置：相对；-webkit-transform：旋转（-1deg）； .span-1display: block;position: relative;-webkit-transform:scale(1.11) translateY(0.02em)rotate(2deg); .span-2display: block;position: relative;-webkit-transform:translateY(-0.04em)rotate(0deg);

使用 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));
);
);
);