使用Wow.js和Animate.css制作单个字母动画
使用Wow.js和Animate.css制作单个字母动画
提问于 2018-08-17 01:22:39
我试着用Wow.js和Animate.css实现一个字母一个字母的动画。
据我所知，默认情况下这是不可能做到的。
我在codepen - https://codepen.io/aartiik/pen/jpjaxE上找到了一支很棒的钢笔
我想要的效果是-“弹跳”。
不幸的是，我找不到让它与自定义文本一起工作的方法。
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++;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-17 03:49:34
该示例循环遍历每个动画字符串，并为动画字符串本身的名称执行逐个字母的动画。如果删除了外部for-循环，则可以使用内部for-循环对任意文本执行相同的操作。
下面是一个fork，我将一个data-text属性放在一个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());
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51882372
复制相关文章
相似问题
腾讯云开发者
