javascript - 使用 css 和 jQuery 制作字母动画

Question

这是我的 JSFIDDLE

当您将鼠标悬停在图像上时，我的文本上有动画。

但我想对这些文本(h1)应用更多效果。

我在我的 JSFIDDLE 上向您展示了一个示例，其中包含文本“我想要什么”(您必须重新加载页面才能看到效果)

我想将文本“我想要的”的效果应用到其他 h1 文本上。 (01-一、02-二和 03-三)

但是这不起作用。

JQUERY:

$('h1').lettering();

$('h1').children().each(function(i){
  var letter = $(this);
  setTimeout(function(){
    //alert('yo');
    letter.addClass('fadeBounceIn')
  }, i*50)
});

Answer 1

看看这个 jsFiddle我做了。我认为这与您想要做的非常接近。

问题在于，您所拥有的字母bounce-in效果仅在页面加载时出现一次。因此，您的所有 h1 都已获得动画效果，但当您滚动时它们不会再次出现动画效果。

我只是将该代码放入一个函数中，如下所示:

var lettering = function() {
$('h1').lettering();
$('h1').children().each(function(i){
  var letter = $(this);
  setTimeout(function(){
    //alert('yo');
    letter.addClass('fadeBounceIn')
  }, i*50)
});
}

然后在滚动函数内部，我简单地添加了对我创建的 lettering() 函数的调用。

最后，我假设您仍然希望它在页面加载时发生，所以我简单地添加了以下内容:

$(document).ready(function() {
lettering();
});

这将在初始页面加载时调用该函数。

您可能需要稍微尝试一下才能获得您想要的特定效果。