可视区域加载动画

有一些需求,是当我们去浏览时才会去加载,譬如一些动画,和一些图片,那么这些是怎样实现的呢?
先来看一下下面的一段小代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视区域加载</title>
</head>
<style>
    #showDiv{
        width: 500px;
        height: 350px;
        background-color: red;
        margin: 1000px auto 0 auto;
    }
    @-webkit-keyframes fadeInLeft {
        0%{
            opacity: 0;
            -webkit-transform: translate3d(-100%,0,0);
            -moz-transform: translate3d(-100%,0,0);
            -ms-transform: translate3d(-100%,0,0);
            -o-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
        }
        100%{
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    }
    .fadeInLeft{
        animation-name: fadeInLeft;
        -webkit-animation-name: fadeInLeft;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
</style>
<body>
    <div id="showDiv"></div>
</body>
<script>
    function showDiv() {
        var showId = document.getElementById('showDiv');
        var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var divTop = showId.getBoundingClientRect().top;
        if(divTop<=clients){
            showId.classList.add('fadeInLeft');
        }else{
            showId.classList.remove('fadeInLeft');
        }
    }
    window.onscroll = showDiv;
</script>
</html>

这里主要用到了CSS3中的动画以及getBoundingClientRect()获取div到浏览器顶部的距离,和浏览器的可视高度进行对比。
先来看下getBoundingClientRect()这个方法:

Paste_Image.png
Paste_Image.png

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,103评论 1 91
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,118评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,030评论 0 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,698评论 24 688
  • 欢喜珍人阅读 30评论 0 1