如何在滚动时动画 [英] How to animate this when scrolled
问题描述
如果您访问以下网站： http://www.justinaguilar.com/animations/ scrolling.html
If you go to the following site: http://www.justinaguilar.com/animations/scrolling.html
你会注意到动画发生在Scroll，而对我来说，当我下载这个动画时，它不会。
You will notice that the animations occur on Scroll, whereas for me, when I downloaded this it doesn't. What do I do to make my animations occur on scroll?
推荐答案
从您所链接的网站复制：
Copied right from the site you linked to:
如果要使用该网站的预制动画，您首先需要将该代码添加到您的项目中。您可以从您链接到的网站下载，也可以直接指向它
If you want to use pre-made animations from that site, you first need to add that code to your project. You can either download it from the website you linked to or you can just point to it.
第一个将添加
<link rel="stylesheet" href="css/animations.css">
到您的HTML文档，并更改href属性实际存储在您的网站上。
to the of your HTML document and changing the href attribute for where you actually store it on your website.
第二个将替代使用本地路径，您将指向具有代码的原始网站，因此您的href属性将如下所示：
The second one will be instead of using local path, you would point to the original website with the code and so your href attribute would look like this:
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
然后你需要添加jQuery到< head& code>您网页的元素：
Then you will need to Add jQuery to the <head> element of your webpage:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
在< / body> 标签以在用户滚动到元素时触发动画：
Add this before the </body> tag to trigger the animation when the user scrolls to the element:
<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替换为动画类。
Replace #animatedElement with the ID or class of the element you want animated. Replace slideUp with an animation class.
400表示元素和屏幕顶部之间的空间。当元素距屏幕顶部为400像素时，动画就会激活。增加此数字可使动画更快启动。
400 represents the space between the element and the top of the screen. The animation activates when the element is 400px from the top of the screen. Increase this number to make the animaton activate sooner.
这篇关于如何在滚动时动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
