Young87

当前位置:首页 >个人收藏

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

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

除特别声明,本站所有文章均为原创,如需转载请以超级链接形式注明出处:SmartCat's Blog

上一篇: TensorFlow实践|TensorFlow实现人脸表情识别

下一篇: Shell变量赋值失败和引用不成功的原因(入门类)

精华推荐