时间戳

首页 > 解决方案 > 仅在屏幕场景和一个又一个元素中键入动画（jQuery）

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

问题描述

如何在 jquery 中使用 <h1 仅对当前显示在屏幕上的元素进行动画处理（因为 html 文件包含许多元素，但大多数元素将被隐藏，并且在一个场景 <span id> 中一次只有一些元素可见） > 首先只显示淡入动画，然后在完成后，第一个 <p> 显示打字动画，然后是下一个 <p> 之后（如果存在的话，还有第三、四、五段）？

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

标签： javascripthtmljquery

解决方案

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

在 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);}

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

推荐阅读