jquery - 在网站上运行一个非常简单的循环动画？

Question

我想制作一个在有人进入我的网站并且所有内容加载后立即运行的动画(jQuery 可以做到吗？) 大多数情况下，除了树叶的黑色小轮廓外，一切都是静态的。

想想暴雪网站动画的一个非常简化的版本: http://us.blizzard.com/en-us/

只是简单的轮廓，遵循简单的路径，几乎笔直，有微小的变化。它会走到一个白色的大物体前面。

谢谢。

Answer 1

这绝对是可行的，尽管有点棘手。我正在制作的网站上做同样的事情，除了雪。有 2 层 png 文件，我使用 backgroundPosition 插件使 animate 能够更改背景位置 - http://cornerstonegreentraining.com/comfortize.com/index.php如果你想看草稿。速度变量只是因为我喜欢以秒而不是毫秒为单位工作。我使用了以下代码:

$(function(){
 bgSnow(100000, 1);
 function bgSnow(animateTime, ratio){
        var speed = 1000;
        $('#snow2').animate({
              backgroundPosition:"(" + speed*15*ratio + "px "+ speed*15 +"px)"
        }, animateTime, 'linear');
        $('#snow1').animate({
               backgroundPosition:"(" + speed*6*ratio + "px "+ speed*4 +"px)"
        }, animateTime, 'linear', function(){
        clearSnow(animateTime, ratio);              
        });
 }
 function clearSnow(animateTime, ratio){
        $('#snow1, #snow2').css('backgroundPosition',"0px 0px");
        bgSnow(animateTime, ratio);
 }
});

您可以添加几个不同时间长度的动画以获得一些变化。此解决方案适用于 IE7 - 如果您使用 css3 或 canvas 解决方案，则必须找到解决方案。