Wow.js 和 Animate.css 的单个字母动画

Question

我试图用 Wow.js 和 Animate.css 实现一个接一个字母的动画。
据我了解，默认情况下这是无法完成的。

我在 codepen 上找到了这支很棒的笔 - https://codepen.io/aartiik/pen/jpjaxE
我想要的效果 - 'BounceIn'.
不幸的是，我找不到让它与自定义文本一起使用的方法。
Javascript:

new WOW({
  offset: 200
}).init();

var animateCss = [
  "bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "jello",
  "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
  "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "flip", "flipInX", "flipInY",
  "lightSpeedIn", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
  "slideInUp", "slideInDown", "slideInLeft", "slideInRight",
  "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
  "rollIn"
];

var placeholder = $(".placeholder");
var colorCounter = 0;

for (i = 0; i < animateCss.length; i++) {
  var word = "<div class=\"word\"></div>";
  $(word).appendTo(placeholder);

  for (j = 0; j < animateCss[i].length; j++) {
    var letterDiv = "<div data-wow-delay=\"" + (j * 0.1).toFixed(2) + "s\"  class=\"letter wow " + animateCss[i] + " color" + colorCounter % 7 + "\">" + animateCss[i][j] + "</div>";
    $(letterDiv).appendTo($(".word").last());
    colorCounter++;
  }
}

Answer 1

该示例循环遍历每个动画字符串并为动画字符串本身的名称执行逐个字母的动画。如果您删除外部 for 循环，则可以使用内部 for 循环对您喜欢的任何文本执行相同的操作。

这是一个分支，我将数据文本属性放在 div 上，并遍历属性值的每个字母：

https://codepen.io/p8ntballer052/pen/ajgQZm

<div class="word bounce" data-text="Bouncing Text">

var target = $(".bounce"),
    targetText = target[0].dataset.text;

for (j = 0; j < targetText.length; j++) {
    var letterDiv = "<div data-wow-delay=\"" + (j * 0.1).toFixed(2) + "s\"  class=\"letter wow bounceIn\">" + targetText[j] + "</div>";
    $(letterDiv).appendTo(target.last());
}

Wow.js 和 Animate.css 的单个字母动画

Individual letter animation with Wow.js and Animate.css

javascript

animate.css

wow.js