码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-10-13 02:53:55      阅读:649      评论:0      收藏:0      [点我收藏+]

标签:doc   滚轮   页面   back   aci   显示   nim   script   head   

 用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以动画方式出现

标签:doc   滚轮   页面   back   aci   显示   nim   script   head   

原文地址:https://www.cnblogs.com/zimengxiyu/p/9781124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!