JavaScript實現頁面滾動到div區域div以動畫方式出現

時間 2019-11-18

標籤 javascript 實現頁面滾動 div 區域動畫方式出現欄目 JavaScript 简体版

原文原文鏈接

用JavaScript實現頁面滾動效果，以及用wow.js二種方式實現網頁滾動效果css

要實現效果是頁面滾動到一塊區域，該區域以動畫方式出現。html

這個效果須要二點：git

一：咱們要先寫好一個css動畫.github

二：用js的監聽頁面滑動的距離在div剛出現時給div添加動畫。web

css動畫ide

  /*設置動畫*/
            @keyframes key {
                0% {
                    margin-left: -50px;
                    opacity: 0;
                }
                50% {
                    margin-left: 50px;
                    opacity: .5;
                }
                100% {
                    margin-left: 0;
                    opacity: 1;
                }
            }

js 動畫

用document.documentElement.scrollTop || document.body.scrollTop來獲取頁面滑動的距離，用來檢測頁面滑動的事件是scroll事件，spa

當頁面恰好滑動到div出現時給div添加動畫，這個距離是div距離頂部的距離減去div的高度即：box.offsetTop-box.offsetHeight，或者你本身寫一個數值也行，只要保證Div剛出現你給它加動畫便可。code

 window.onscroll = function() {
                //檢測鼠標滾輪距離頂部位置
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(top);//頁面滾動時能夠獲得滾動的距離能夠根據這個數值來決定什麼時候給div綁定動畫
                //要設置到DIV剛顯示出來時給div添加動畫
　　　　　　　　 if(top > （box.offsetTop-box.offsetHeight）) { 
　　　　　　　　　　　　box.style.animation = "key .25s linear 2"//添加動畫  
　　　　　　　　　　}
            }

完整代碼htm

<!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添加動畫
            window.onscroll = function() {
                //檢測鼠標滾輪距離頂部位置
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(top);
                //要設置到DIV顯示出來時給div添加動畫 也能夠設置一個數值只要保證div出來給它加動畫便可
                if(top > (box.offsetTop - box.offsetHeight)) {　　　　　　　　　　　　
                    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>