Question

您好我正在搞乱一些CSS动画，发现可以在这里找到的animate.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>

Answer 1

当页面从顶部滚动50px时，我使用这个小的JS代码将类.fixed添加到带有.top-menu的元素。如果你知道你的元素的位置你可以在用户从顶部设置滚动时添加动画类。

<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>

Answer 2

您可以通过捕获元素和视口的位置来更改类名。

即

if( scroll down to the element ) {
  $('.target').addClass('active');
} else {
  $('.target').removeClass('active');
}

在你的情况下，你可以设置类来控制像这样的动画

$('#yourElement').addClass('animated bounceOutLeft');

更新

fiddle

Answer 3

Live Demo:

为此，您使用了来自jquery的bind函数

此功能将添加“来自动画的css＆＃39;某些类名称”。当html的特定部分将显示在用户视图中时。

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

仅当屏幕看到元素ID时，animate.css才会生效

3 个答案: