淡入左图像滚动航点

FadeinLeft Image scroll Waypoint

本文关键字：滚动 图像 淡入      更新时间：2023-09-26

我尝试过不同的网站，甚至试图解码航点指南，但没有运气。我似乎无法让滚动功能使用以下代码。（参考资料：http://blog.robamador.com/using-animate-css-jquery-waypoints/）

任何帮助将不胜感激。 

<!doctype html><html><head><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<style>
img {
margin:1000px 0;
display:block;
}
</style>
<script>
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{ offset: 'bottom-in-view' });
//Animate from bottom
 $('.animated').waypoint(function() {
 $(this).toggleClass($(this).data('animated'));});
 </script>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img class="animated" data-animated="fadeInLeft" src="http://placekitten.com/g/200/300">
<img class="animated" data-animated="bounce" src="http://placekitten.com/g/200/300">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js">   </script>
</body>
</html>

首先，将 jQuery 脚本和 Waypoint 脚本包含在 HEAD 标签中。在99%的情况下，这是在DOM中包含javascript库的正确方法。

第二件事：你在HEAD标签中编写javascript代码（这是正确的），但没有"启动控件"。在您的情况下，浏览器在读取 DOM 的其余部分之前开始执行您的 javascript 代码，因此它无法在正确的元素（带有类"animated"的图像）上附加事件，因为它尚未读取它们。简而言之，当浏览器开始读取您的 SCRIPT 标签时，它不知道".animated"是谁，因此它什么也不做。

有两种方法可以解决您的问题：

1 - 将脚本标签及其内容移动到正文标签的末尾。

2 - 将 JavaScript 代码包装在 DOM.ready 状态，如下所示：

<script>
        $(document).ready(function() {
            //Animate from top
            $('.animated').waypoint(function() {
                $(this).toggleClass($(this).data('animated'));
            }, {
                offset : 'bottom-in-view'
            });
            //Animate from bottom
            $('.animated').waypoint(function() {
                $(this).toggleClass($(this).data('animated'));
            });
        });
    </script>

老实说，我更喜欢选项 2。 =D

相关文章：