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

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 解决方案，则必须找到解决方案。