页面滚动标签添加动画

最新推荐文章于 2022-04-18 10:44:32 发布

在线小白www

最新推荐文章于 2022-04-18 10:44:32 发布

阅读量144

点赞数

分类专栏： JavaScript jQuery

本文链接：https://blog.csdn.net/qq_43654065/article/details/119775327

版权

JavaScript 同时被 2 个专栏收录

128 篇文章 7 订阅

订阅专栏

jQuery

109 篇文章 3 订阅

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="./js/jquery.js"></script>
  <title>Document</title>
  <style>
    h1,
    h2,
    h3 {
      transform: translateY(50px);
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -o-transform: translateY(50px);
      transition: all .5s;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
      opacity: 0;
    }

    h1.on,
    h2.on,
    h3.on {
      transform: none;
      -webkit-transform: none;
      -moz-transform: none;
      -o-transform: none;
      opacity: 1;
    }

    h2.on {
      transition-delay: .25s;
      -moz-transition-delay: .5s;
      -o-transition-delay: .5s;
      -webkit-transition-delay: .5s;
    }

    h3.on {
      transition-delay: .5s;
      -moz-transition-delay: .5s;
      -o-transition-delay: .5s;
      -webkit-transition-delay: .5s;
    }

    .box {
      width: 100%;
      height: 1000px;
    }
  </style>
</head>

<body>
  <h1 class="test">1这是一级标题</h1>
  <h2 class="test">1这是二级标题</h2>
  <h3 class="test">1这是三级标题</h3>
  <div class="box"></div>
  <h1 class="test">2这是一级标题</h1>
  <h2 class="test">2这是二级标题</h2>
  <h3 class="test">2这是三级标题</h3>
  <script>
    $(function () {
      new Move().init(".test")
    })
    function Move() {
      var _that = this
      this.init = function (id) {
        this.move(id);
        $(window).on('scroll', function () {
          _that.move(id);
        })
      }
      this.move = function (id) {
        $(id).each(function (index, item) {
          // 页面滚动距离
          var scroolTop = $(window).scrollTop();
          // 可视区域高度
          var windowHeight = $(window).height()
          if (scroolTop + windowHeight > $(item).offset().top) {
            $(item).addClass("on")
          } else (
            $(item).removeClass("on")
          )
        })
      }
    }
   
  </script>
</body>

</html>