Question

我正在尝试使用Textillate为三种不同风格的文本制作动画。文本需要以相同的速度动画。节点和节点2都是相同的文本，只是样式不同，一个重叠在另一个上。

我需要node和node2以相同的速度进行动画处理。字符分别进行动画处理，并且两个文本的字符长度相同，即可正常工作。

但是，我需要对node2的两个跨度进行不同的样式设置。但是，span标记将被忽略，并且它们将根据Textilate函数中指示的类进行样式设置。

有没有办法将不同的样式应用于node2的两个跨度？

Codepen在这里：https://codepen.io/sachisasachi/pen/RVmgpw

var node, node2, len;


$('.hbstart').click(function() {
$('.hbstart').remove();

for(var i=0, len=<? echo count($words)?>; i < len; i++){
<?

$i=0;
foreach($words as $word){
?>

node = document.createElement("LI");                        
node.innerHTML = "TEXT <?=$word['word']?>";
document.getElementById("myList").appendChild(node); 

node2 = document.createElement("LI");                       
node2.innerHTML = "<span class='comp'><?=$word['compspace']?></span>
<span class='comp2'><?=$word['comp']?></span>";
document.getElementById("myList2").appendChild(node2); 

<? }
$i++;?>

}


$('.tlt, .tlt2').textillate({
 selector: '.texts',
 loop: true,
 minDisplayTime: 2000,  
 initialDelay: 0,   
 autoStart: true,
 inEffects: [], 
 outEffects: [],

 in: {
  effect: 'fadeIn', 
  delayScale: 1.5, 
  delay: 50,
  sync: false, 
  shuffle: true,
  reverse: false,
  callback: function () {}
 },

 out: {
  effect: 'fadeOut',
  delayScale: 1.5,
  delay: 50,
  sync: false,
  shuffle: true,
  reverse: false,
 callback: function () {}
 },
 callback: function () {}
  type: 'char',
});

我的HTML是：

 <h1 class="tlt">
  <ul class="texts" id="myList">
  <li class="hbstart">HB</li>
  </ul> 
 </h1>

 <h1 class="tlt2">
  <ul class="texts" id="myList2">
  </ul>
 </h1>

使用Textillate动画两种不同风格的文本

0 个答案: