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

需要的文件：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>