控制元素到达可视区域内触发动效_dom进入屏幕动画方案-CSDN博客

本文介绍了一种在网页滚动到特定元素时触发动画效果的方法。通过监听滚动事件并计算元素位置，当元素进入可视区域时，自动为其添加动画类，实现平滑过渡。适用于多种动画效果，代码示例基于jQuery。

控制元素到达可视区域内触发动效，代码参考了别人的，有修改，时间久了，出处想不起来。后面遇到了会补充源码地址。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>控制元素到达可视区域内触发动效</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <style>
        div.animateDiv{
            width:100%;
            height:400px;
            background: #fff;
            font-size:36px;
            color: #000;
            text-align: center;
        }
        .fadeInUp{
            width:100%;
            height:100px;
            position:relative;
            overflow: hidden;
            line-height: 100px;
            animation: myfirst 1s linear;
            -webkit-animation: myfirst 1s linear;  /* Safari 和 Chrome */
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */  {
            0%   {color:#fff; top:300px;}
            100% {color:#000; top:0;}
        }
    </style>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12" style="width:100%;height:1000px;background: #5cb85c"></div>
        <div class="col-lg-12">
            <div class="animateDiv">
                <div data-animate="fadeInUp">青青子衿，悠悠我心。纵我不往，子宁不嗣音？</div>
            </div>
        </div>
        <div class="col-lg-12" style="width:100%;height:800px;background: #5bc0de"></div>
        <div class="col-lg-12">
            <div class="animateDiv">
                <div data-animate="fadeInUp">青青子佩，悠悠我思。纵我不往，子宁不来？</div>
            </div>
        </div>
        <div class="col-lg-12" style="width:100%;height:800px;background: #c7ddef"></div>
        <div class="col-lg-12">
            <div class="animateDiv">
                <div data-animate="fadeInUp">挑兮达兮，在城阙兮。一日不见，如三月兮。 </div>
            </div>
        </div>
        <div class="col-lg-12" style="width:100%;height:800px;background: #7fd53e"></div>
        <div class="col-lg-12">
            <div class="animateDiv">
                <div data-animate="fadeInUp">诗经《国风·郑风·子衿》</div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.1.1.min.js"></script>
<script>
    /*
     说明：这是一个滚动到可视区域播放动画的插件，当窗口滚动到可视区域时添加ClassName进入动画；
     1.查找页面内所含有[data-animate]的元素，遍历得到他们本身；[data-animate]值为动态获取，需手写animation，
     更多动画效果请访问https://daneden.github.io/animate.css/；
     2.调用函数:计算元素是否到达可视区域 返回Boolean值；
     3.添加有动画的ClassName；
     注意：此方法不能用于ifarm,窗口滚动影响判断
     */

    $(function(){
        var windowHeight = $(window).height();  //窗口高度

        // 监听页面滚动
        $(window).scroll(function(event){
            // 添加【data-animatie】
            var dataAnimateEl = $('[data-animate]');
            if (dataAnimateEl.length > 0 ) {
                dataAnimateEl.each(function(){
                    var element = $(this);
                    var is_Animat  = is_Visible_Area(element); //调用函数计算是否到达可视区域 返回Boolean
                    var annimationVal=element.data("animate");
                    if (is_Animat){
                        element.addClass(annimationVal);
                    }
                })
            }
        });

        //函数作用：计算元素是否到达可视区域
        function is_Visible_Area(element) {
            var objHeight = $(element).offset().top;//元素到顶部的高度
            let winPos = $(window).scrollTop();//距离顶部滚动
            let val = objHeight-winPos;
            if (val<windowHeight && val > 0) {
                //可视区域
                // console.log("有动画")
                return true;
            }else {
                //不可视区域
                // console.log("不在可视区域内")
                return false;
            }
        }
    });

</script>
</body>
</html>

在vue中使用

methods: {
    handleAnimate:function(){
        var windowHeight = $(window).height();  //窗口高度

        // 添加【data-animatie】
        var dataAnimateEl = $('[data-animate]');
        if (dataAnimateEl.length > 0 ) {
            dataAnimateEl.each(function(){
                var element = $(this);
                var is_Animat  = false; //调用函数计算是否到达可视区域 返回Boolean
                var objHeight = $(element).offset().top;//元素到顶部的高度
                let windowsScrollTop = $(window).scrollTop();//距离顶部滚动
                let val = objHeight-windowsScrollTop;
                if (val < windowHeight && val > 0) {
                    //可视区域
                    is_Animat=true;
                }
                var annimationVal=element.data("animate");
                if (is_Animat) {
                    element.addClass(annimationVal);
                }
            })
        }
    }
},
mounted:function(){
    window.addEventListener('scroll', this.handleAnimate)
}