为了账号安全,请及时绑定邮箱和手机立即绑定

如何使这个js动画效果为多行&动画一个接一个?

如何使这个js动画效果为多行&动画一个接一个?

九州编程 2022-09-23 16:35:30

如何使这个js动画效果为多行&动画一个接一个?


就像


<h1 class="rks1">  First Line </h1>

<h1 class="rks1">  Then Second Line </h1>

<h1 class="rks1">  Then Third Line </h1>

<h1 class="rks1">  Then Fourth Line </h1>

<h1 class="rks1">  Then Fifth Line </h1>

&更多...然后重新启动第一行,或者我认为它可能喜欢:


<h1 class="rks1">  First Line </h1>

<h1 class="rks2">  Then Second Line </h1>

<h1 class="rks3">  Then Third Line </h1>

<h1 class="rks4">  Then Fourth Line </h1>

<h1 class="rks5">  Then Fifth Line </h1>

&更多...然后重新启动第一行


var textWrapper = document.querySelector('.rks1');


textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {

  return `<span class="word">` +

    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +

    `</span>`;

});


var targets = Array.from(document.querySelectorAll('.rks1 .letter'));


anime.timeline({

  loop: true,

})

  .add({

    targets: targets,

    scale: [3,1],

    scaleY: [1.5,1],

    opacity: [0,1],

    translateZ: 0,

    easing: "easeOutExpo",

    duration: 400,

    delay: (el, i) => 60*i

  }).add({

    targets: targets.reverse(),

    scale: [1,3],

    scaleY: [1,1.5],

    opacity: [1,0],

    translateZ: 0,

    easing: "easeOutExpo",

    duration: 100,

    delay: (el, i) => 30*i

  }).add({

    opacity: 0,

    duration: 2000,

    easing: "easeOutExpo",

    delay: 800

  });

.rks1 {

font-weight: 900;

font-size: 2.5em;

font-family: rr;

}


.rks1 .letter {

display: inline-block;

line-height: 1em;

}


.word {

white-space: nowrap;

}


.span {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

   

<h1 class="rks1"> First animate this line Okay </h1>

<h1 class="rks1">  Then Second Line </h1>

<h1 class="rks1">  Then Third Line </h1>

<h1 class="rks1">  Then Fourth Line </h1>

<h1 class="rks1">  Then Fifth Line </h1>



or may be this format :




& more...

我想让这成为首先动画一行,然后在同一个地方动画下一行,然后下一个,与依此类推相同。干草!堆栈溢出社区任何人在此功能中更改此javascript,请快速完成。这对我来说非常重要。


查看完整描述

1 回答

?
胡子哥哥

TA贡献1512条经验 获得超6个赞

使用 和 将所有字母和单词括起来,并带有跨度querySelectorAllforEach


var textWrappers = document.querySelectorAll('.rks1');


textWrappers.forEach(textWrapper => {

  textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {

    return `<span class="word">` +

      m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +

      `</span>`;

  });

});


var targets = Array.from(document.querySelectorAll('.rks1 .letter'));


anime.timeline({

    loop: true,

  })

  .add({

    targets: targets,

    scale: [3, 1],

    scaleY: [1.5, 1],

    opacity: [0, 1],

    translateZ: 0,

    easing: "easeOutExpo",

    duration: 400,

    delay: (el, i) => 60 * i

  }).add({

    targets: targets.reverse(),

    scale: [1,3],

    scaleY: [1,1.5],

    opacity: [1,0],

    translateZ: 0,

    easing: "easeOutExpo",

    duration: 100,

    delay: (el, i) => 30*i

  }).add({

    opacity: 0,

    duration: 2000,

    easing: "easeOutExpo",

    delay: 800

  })

.rks1 {

  font-weight: 900;

  font-size: 2.5em;

  font-family: rr;

}


.rks1 .letter {

  display: inline-block;

  line-height: 1em;

}


.word {

  white-space: nowrap;

}


.span {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<h1 class="rks1"> First animate this line Okay </h1>

<h1 class="rks1"> Then Second Line </h1>

<h1 class="rks1"> Then Third Line </h1>

<h1 class="rks1"> Then Fourth Line </h1>

<h1 class="rks1"> Then Fifth Line </h1>



or may be this format : & more...


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信