嗨，我正在摆弄一些CSS动画，发现animation . CSS可以在这里找到:http://daneden.github.io/animate.css/真的很有帮助。这个css文件很容易使用，只需添加类动画，然后添加您希望元素具有的效果。我唯一不知道怎么做的是触发效果只有当屏幕是在一个特定的#id或。class的顶部，而不是效果加载时，页面加载。任何想法?
快速示例:(使蓝色框的动画方式，但只有当你滚动它的顶部)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="animate.css">
<style type="text/css">
body { width: 500px;}
.box {
width: 150px;
height: 200px;
background:#09F;
color:#fff;
font-weight:bold;
text-align:center;
margin: auto;
}
</style>
</head>
<body>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."<p/>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."<p/>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."<p/>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."<p/>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."<p/>
<div class="box animated rubberBand" id="box">Animation Box</div>
</body>
</html>
我使用这个小JS代码添加类。fixed到元素与类。top-menu当页面从顶部滚动50px。如果你知道你的元素的位置，你可以添加动画类，当用户从顶部滚动u集。
<script>
$(window).scroll(function() {
var navigation = $('#header > .menu > .top-menu');
if($(window).scrollTop() > 50)
{
if(!navigation.hasClass('fixed'))
{
navigation.addClass('fixed');
}
}
else
{
navigation.removeClass('fixed');
}
});
</script>
现场演示:
使用jquery中的bind函数
当html的特定部分在用户视图中显示时，该函数将添加'some-class-name-from-animated-css'。
jQuery(document).ready(function(){})
jQuery('.inview').bind('inview',function(event,visible)
{
if(visible==true)
{
jQuery('.animated').addClass("some-class-name-from-animated-css");
}
else{
jQuery('.animated').removeClass("some-class-name-from-animated-css");
}
});
你的HTML将是:
<p id="test2" style="margin-bottom:900px">FOr Long Scroll Only</p>
<p id="test3" class="inview animated">Html Value</p>
在任何需要滚动动画的部分都必须添加inview和animated这两个类
您可以通过捕获元素和视口的位置来更改类名。
if( scroll down to the element ) {
$('.target').addClass('active');
} else {
$('.target').removeClass('active');
}
在你的例子中，你可以像这样设置类来控制动画
$('#yourElement').addClass('animated bounceOutLeft');
小提琴