Question

我想创建一个动画，只要有人进入我的网站并且一切都加载就可以运行（jQuery能做到吗？）除了叶子的黑色小轮廓外，一切都是静态的。

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

简单的轮廓沿着一条简单的路径，几乎是直的，有微小的变化。它将在一个大的白色物体前面。

谢谢。

Answer 1

这绝对可行，虽然有点棘手。除了下雪，我在我正在制作的网站上做同样的事情。有2层png文件，我使用backgroundPosition插件让动画能够改变背景位置 - 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解决方案，则必须找到复飞。

Answer 2

有很多方法可以做到这一点。

如果您动画队列中的任何动画，例如位置，颜色，背景颜色，边距，字体大小等，您可以使用JQuery的animate（）函数。因此，您可以为要创建轮廓的HTML元素的位置，宽度和高度设置动画。您可以在此处详细了解动画对象 - http://api.jquery.com/animate/
使用CSS3转换，您可以对HTML元素执行许多缩放和转换操作。这是一个开始了解更多信息的好地方 - http://css3.bradshawenterprises.com/。这是另一个有助于CSS3动画的插件 - http://ricostacruz.com/jquery.transit/
您还可以使用canvas元素 - http://www.html5canvastutorials.com/运行动画。 canvas元素可用于简单和复杂的动画。对于更复杂的3D动画，这里有一个很棒的画廊 - http://mrdoob.github.com/three.js/
如果你需要在这些矢量上使用矢量图形和动画，你也可以使用SVG。 Keith Wood制作了一个Jquery插件 - http://keith-wood.name/svg.html

还有很多其他插件和JavaScript / JQuery库可以帮助创建动画。

如果要将动画叠加在图像或背景上方，则需要按以下方式设置HTML：

<div class='container'>
    <div class='gallery'>
        <div id='item1'></div>
        <div id='item2'></div>
        <div id='item3'></div>
    </div>
</div>

因此，您可以在'容器'类上设置背景，并在'gallery'类上运行JQuery库，以在您拥有的各种'#item'子项之间进行滑动。例如。你可以使用JQuery Cycle插件 - http://jquery.malsup.com/cycle/ - 在'gallery'和每个#item元素中放置你的动画元素。请记住，动画元素的z-index需要高于父容器的z-index。

$（window）.load（） - 加载所有内容后运行，是Javascript的标准功能。
$（document）.ready（） - 在加载HTML文档并且特定于JQuery时运行。

有许多方法可以实现您想要达到的目标，并且根据您的要求，一种方法可能有效。重要的是要记住z-index方面，因为动画元素需要出现在较低层之上。

希望这有帮助。

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

2 个答案: