JavaScript实现页面滚动到div区域div以动画方式出现

Posted 2021-01-12 雪旭

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现页面滚动到div区域div以动画方式出现相关的知识，希望对你有一定的参考价值。

用javascript实现页面滚动到div区域div以动画方式出现CSS动画

页面滚动到一块区域，改区域以动画方式出现实现这个效果需要二点：一我们要先写好一个css动画，二：用js的监听页面滑动的距离在给div添加动画

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            img {
                width: 1000px;
                height: 800px;
            }
            
            .box {
                width: 500px;
                height: 500px;
                line-height: 500px;
                text-align: center;
                font-size: 50px;
                color: red;
                border: 1px solid;
            }

            /*设置动画*/
            @keyframes key {
                0% {
                    margin-left: -50px;
                    opacity: 0;
                }
                50% {
                    margin-left: 50px;
                    opacity: .5;
                }
                100% {
                    margin-left: 0;
                    opacity: 1;
                }
            }
        </style>
    </head>

    <body>
        <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />
        <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />
        <div class="box">div以动画方式出现</div>
        <script>
            var box = document.querySelector(".box");
            //用js检测鼠标滚轮距离顶部位置来给div添加动画
            document.onscroll = function() {
                //检测鼠标滚轮距离顶部位置
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(top);
                //数值要设置到DIV显示出来时再给div添加动画要不就看不到动画了
                if(top > 1000) {
                    box.style.animation = "key .25s linear 2"//添加动画
                }
            }
        </script>
    </body>

</html>

以上是关于JavaScript实现页面滚动到div区域div以动画方式出现的主要内容，如果未能解决你的问题，请参考以下文章

使用 JavaScript/jQuery 滚动到 DIV 的顶部？

Jquery / Javascript滚动到只有类元素的页面中的div

html手机页面限制滑动区域（在滑动一个div区域时不会带动整个页面的滑动，详情见补充）

javascript前台开发问题，怎么设置使页面的滚动条不滚动，看详细描述

JavaScript 使用页面加载中的URL中的变量滚动到特定div

使用纯 Javascript 滚动到可滚动 DIV 内的元素