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

用JavaScript实现页面滚动效果，以及用wow.js二种方式实现网页滚动效果

要实现效果是页面滚动到一块区域，该区域以动画方式出现。

这个效果需要二点：

一：我们要先写好一个css动画.

二：用js的监听页面滑动的距离在div刚出现时给div添加动画。

css动画

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

用document.documentElement.scrollTop || document.body.scrollTop来获取页面滑动的距离，用来检测页面滑动的事件是scroll事件，

当页面刚好滑动到div出现时给div添加动画，这个距离是div距离顶部的距离减去div的高度即：box.offsetTop-box.offsetHeight，或者你自己写一个数值也行，只要保证Div刚出现你给它加动画即可。

const box = document.querySelector(".box");
//用js检测鼠标滚轮距离顶部位置来给div添加动画
window.onscroll = function () {
    //检测鼠标滚轮距离顶部位置
    const top = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(top, box.offsetTop);
    //要设置到DIV显示出来时给div添加动画 也可以设置一个数值只要保证div出来给它加动画即可
    if (top + window.innerHeight >= box.offsetTop) {
        box.style.animation = "key .25s linear 2";
    }
}

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        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/1.jpg" />
    <img src="img/1.jpg" />
    <div class="box">div以动画方式出现</div>
    <script>
        const box = document.querySelector(".box");
        //用js检测鼠标滚轮距离顶部位置来给div添加动画
        window.onscroll = function () {
            //检测鼠标滚轮距离顶部位置
            const top = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(top, box.offsetTop);
            //要设置到DIV显示出来时给div添加动画 也可以设置一个数值只要保证div出来给它加动画即可
            if (top + window.innerHeight >= box.offsetTop) {
                box.style.animation = "key .25s linear 2";
            }
        }
    </script>

</body>

</html>

实际工作中如果一个页面需要大量的动画上面写法就很累人了，但我们可以用wow.js和animate.css动画库配合来实现需要的动画效果。wow.js下载地址http://www.dowebok.com/131.html，animate.css下载地址https://daneden.github.io/animate.css/

使用方法分别引入animate.css和wow.js然后在html中加上 class="wow slideInLeft" 第二个class可以自已更改.

HTML

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

wow是必须要添加的
slideInLeft说明了动画的样式，是从左边滑动出来的。更多动画样式可以再这个网址https://daneden.github.io/animate.css/查看。

new一下调用一下方法就完成了动画效果的附加

new WOW().init();

哪里需要动画只需要在哪里的class里面写上wow slideInLeft 就好了

posted @ 2018-10-12 22:35 雪旭阅读(17418) 评论(0) 收藏举报

刷新页面返回顶部

雪旭

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

公告