Question

如果您访问以下网站：http://www.justinaguilar.com/animations/scrolling.html

你会注意到动画发生在Scroll上，而对我来说，当我下载它时却没有。如何在滚动时进行动画制作？

Answer 1

从您关联的网站直接复制：

如果您想使用该网站的预制动画，首先需要将该代码添加到您的项目中。您可以从the website you linked to下载它，也可以指向它。

第一个将完成添加

<link rel="stylesheet" href="css/animations.css">

到您的HTML文档并更改href属性，以便将其实际存储在您的网站上。

第二个不是使用本地路径，而是使用代码指向原始网站，因此您的href属性将如下所示：

<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">

然后，您需要将jQuery添加到网页的<head>元素中：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

在</body>标记之前添加此内容，以在用户滚动到元素时触发动画：

<script>
    $(window).scroll(function() {
        $('#animatedElement').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+400) {
                $(this).addClass("slideUp");
            }
        });
    });
</script>

将#animatedElement替换为您想要设置动画的元素的ID或类。将slideUp替换为动画类。

400表示元素与屏幕顶部之间的空间。当元素距离屏幕顶部400px时，动画将激活。增加此数字可以更快地激活动画。

滚动时如何设置动画

1 个答案: