前端-----滚动加载页面动画技巧

需要的文件：animate.min.css+jquery.appear.js

• jQuery scrollappear是一个强大的和敏捷的内容出现在滚动（或其他事件触发）jQuery插件。
• animate.css 齐全的CSS3动画库

使用方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">
<script src="jquery.appear.js"></script>

2、HTML 及使用

<style>
.animated {
visibility: hidden; }
.visible {
visibility: visible; }
</style>

<div class="animated" data-animation="fadeIn" data-animation-delay="300">test</div>

3、js动画触动

<script>
/************************************************************************
 * Animation效果
*************************************************************************/ 
 $('.part .animated').appear(function() {
 var elem = $(this);
 var animation = elem.data('animation');
 if ( !elem.hasClass('visible') ) {
 var animationDelay = elem.data('animation-delay');
 if ( animationDelay ) {
 setTimeout(function(){
 elem.addClass( animation + " visible" );
 }, animationDelay);
 } else {
 elem.addClass( animation + " visible" );
 }
 }
 });

</script>