$(window).scroll(function(){var top=$(window).scrollTop()if(top>t1&&top<t2){
$("#a1").addClass("an1")
}if(top>t2&&top<t3){
$("#a2").addClass("an1")
}if(top>t3){
$("#a3").addClass("an1")
}
})</script>
大概的过程是这样的:...
a(this).addClass("animated").find(".aninode").each(function() {
a(this).addClass(a(this).attr("data-animate"))
})
...
页面滚动到每个 section 元素的时候,先给它加个名为 animated 的 class ,在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值,也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说,通过 class="animated" 当做钩子,有 animated 这个 class 的时候,名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。
动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。
其实这个页面可以再完善下 section 元素 move 出屏幕的时候,去掉 animated;当move 回来的时候再加上 animated。目前的情况是,滚动到页面最低下以后,再往上滚动页面,就看不见动画效果了