animate.css 仅在您的屏幕看到元素 ID 时生效答案

【问题标题】：animate.css effects only when your screen sees the element IDanimate.css 仅在您的屏幕看到元素 ID 时生效
【发布时间】：2014-07-24 08:58:17
【问题描述】：

嗨，我在搞乱一些 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>

【问题讨论】：

显示一些代码，可能还有一个小提琴......
我编辑了我的问题，检查一下

标签： html css class animate.css

【解决方案1】：

当页面从顶部滚动 50 像素时，我使用这个小的 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>

【讨论】：

嗯，我不完全理解的唯一部分是var navigation = $('#header > .menu > .top-menu'); 部分。 #header > .menu > .top-menu 是否就像在 CSS 中一样选择菜单？

【解决方案2】：

Live Demo:

为此，您可以使用 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

【讨论】：

【解决方案3】：

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

那是

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

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

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

更新

fiddle

【讨论】：

这是我在 html 示例中所做的，假设您已经链接了 animate.css [jsbin.com/citot/1/edit?html,css,js,console,output]
这解决了您的问题吗？顺便说一句，您可以通过更改 scrolling > target - viewport / 2 来决定要制作动画的位置（添加类）
是的，我通过设置viewport / 1 让它工作了。我不明白scrolling > target - viewport / 2 是如何工作的？