js 原生监听浏览器当前高度，触发动画效果(各种动画)。css animate

最新推荐文章于 2022-11-28 15:39:31 发布

刘泽美

最新推荐文章于 2022-11-28 15:39:31 发布

阅读量1.5k

点赞数

分类专栏：代码成长实例

本文链接：https://blog.csdn.net/weixin_41884153/article/details/89462749

版权

代码成长实例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

少啰嗦直接上效果！！

少啰嗦，直接上效果！！

再少啰嗦，直接上代码：

注意：代码中引用的animate.css，可以去官网下载https://daneden.github.io/animate.css/

或者再懒一点，直接中这个代替那一行
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 替换如下这一行 -->
  <link rel="stylesheet" type="text/css" href="./animate.css" /> 
  <title>Document</title>
  <style>
    body {
      overflow-x: hidden;
    }

    div {
      width: 100px;
      height: 100px;
      margin: 100px auto 0;
      background: red;
    }
  </style>
  <script>
    // 获取浏览器可见区域高度
    var window_height = document.documentElement.clientHeight;
    console.log(window_height)
    // 用户手动修改浏览器可见区域高度时修改变量
    window.onresize = function () {
      window_height = document.documentElement.clientHeight;
      console.log(window_height)
    };
    // 获取所需效果元素
    var My_dream = document.getElementsByClassName('dream');
    // 鼠标滚轮滚动执行方法
    window.onscroll = function () {
      // 获取鼠标滚轮滚动距离
      var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

      // console.log('screenTop',window.screenTop)
      // console.log('offsetHeight:',document.body.offsetHeight)
      // console.log('scrollHeight:',document.body.scrollHeight)

      // 循环类dream
      for (var k = 0; k < My_dream.length; k++) {
        console.log(k,':','_scrollTop大于：', getOffsetTop(My_dream[k]) - window_height)
        console.log(k,':','scrollTop', _scrollTop)
        console.log(k,':','_scrollTop小于：', getOffsetTop(My_dream[k]))
        if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {

          My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
          My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
          My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
        }
      }
    };

    // 判断元素父集是否有已定位元素
    function getOffsetTop(ele) {
      var rtn = ele.offsetTop;
      var o = ele.offsetParent;
      while (o != null) {
        rtn += o.offsetTop;
        o = o.offsetParent;
      }
      return rtn;
    }

    // 滚动条等于0时执行第一屏效果
    function my_animation() {
      var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      // 效果方法
      for (var k = 0; k < My_dream.length; k++) {
        if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {
          My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
          My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
          My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
        }
      }
    }
    my_animation();
  </script>
</head>

<body>
  <div class="dream" data-animate="bounceInUp,1s,linear" data-hello="hello">1</div>
  <div class="dream" data-animate="flash,2s,linear">2</div>
  <div class="dream" data-animate="pulse,1s,linear">3</div>
  <div class="dream" data-animate="rubberBand,1s,linear">4</div>
  <div class="dream" data-animate="shake,1s,linear">5</div>
  <div class="dream" data-animate="swing,1s,linear">6</div>
  <div class="dream" data-animate="tade,1s,linear">7</div>
  <div class="dream" data-animate="wobble,1s,linear">8</div>
  <div class="dream" data-animate="jello,1s,linear">9</div>
  <div class="dream" data-animate="bounceIn,1s,linear">10</div>
  <div class="dream" data-animate="bounceInDown,1s,linear">11</div>
  <div class="dream" data-animate="bounceInLeft,1s,linear">12</div>
  <div class="dream" data-animate="bounceInRight,1s,linear">13</div>
  <div class="dream" data-animate="bounceInUp,1s,linear">14</div>
  <div class="dream" data-animate="bounceOut,1s,linear">15</div>
  <div class="dream" data-animate="bounceOutDown,1s,linear">16</div>
  <div class="dream" data-animate="bounceOutLeft,1s,linear">17</div>
  <div class="dream" data-animate="bounceOutRight,1s,linear">18</div>
  <div class="dream" data-animate="bounceOutUp,1s,linear">19</div>
  <div class="dream" data-animate="fadeIn,1s,linear">20</div>
  <div class="dream" data-animate="fadeInDown,1s,linear">21</div>
  <div class="dream" data-animate="fadeInLeft,1s,linear">22</div>
  <div class="dream" data-animate="fadeInRight,1s,linear">23</div>
  <div class="dream" data-animate="fadeInUp,10s,linear">24</div>
  <div class="dream" data-animate="fadeInDownBig,1s,linear">25</div>
  <div class="dream" data-animate="fadeInLeftBig,1s,linear">26</div>
  <div class="dream" data-animate="fadeInRightBig,1s,linear">27</div>
  <div class="dream" data-animate="fadeInUpBig,1s,linear">28</div>
  <div class="dream" data-animate="flip,1s,linear">29</div>
  <div class="dream" data-animate="hinge,1s,linear">30</div>
</body>

</html>

刘泽美

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 原生监听浏览器当前高度，触发动画效果(各种动画)。css animate

少啰嗦直接上效果！！再少啰嗦，直接上代码：注意：代码中引用的animate.css，可以去官网下载https://daneden.github.io/animate.css/或者再懒一点，直接中这个代替那一行<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/...
复制链接

扫一扫