Question

我有这个模板http://t2themes.com/themes/workout/demo 我试图动画一个div的方式网站动画每个元素，文章等但我无法找到正确的代码。如果我使用此代码：

div.anim { -webkit-animation: flipInX 1.2s 0s ease forwards; -moz-animation: flipInX 1.2s 0s ease forwards; -o-animation: flipInX 1.2s 0s ease forwards; animation: flipInX 1.2s 0s ease forwards; opacity: 0; }

我的div动画但它在页面加载时动画。我希望在屏幕上显示动画，就像演示中的PROGRAMS部分一样。另外我想在6个div上做这个，并且我的代码他们都在同一时间动画，我希望动画就像在演示中一样，一次一个

我怎么能这样做？

Answer 1

当用户滚动到屏幕上的那个位置时，他们使用jQuery加载元素。您需要实现一些jQuery / JS来检测用户在页面上的位置，然后显示该元素。

他们正在做的是添加一类“动画片”＆＃39; （一个任意的类名）当用户到达他们动画的那个位置时。

下面的代码片段检测用户何时滚动，如果用户滚动超过500px，则会添加一个类（在本例中称为）＆＃39; animate＆＃39;到（在这种情况下）ID。

希望有所帮助。

<script type="text/javascript">
// <![CDATA[
(function($){
    $(document).ready(function(){
        $(document).scroll(function() {
            if ( $(document).scrollTop() > 500 ) {
                $('#ELEMENTID').addClass('animate');
            }
        })
    });
})(jQuery);
// ]]>
</script>

Css在元素秀上淡出动画

1 个答案: