长页面滚屏动画

2024-04-06 20:53:26

H5长页面 , 向上滑动 , 页面滚动到元素位置 , 元素显示并做动画显示 ,

向下滑动 , 元素不在屏幕显示 , 元素取消动画now类并隐藏 , 方便再次滑动添加动画

Demo使用了使用 animate.css https://www.cnblogs.com/xiaohuochai/p/7372665.html

核心js代码:

      $(window).scroll(function () {
        var wTop = $(window).scrollTop()
        $('.class,.w>div,.instant').each(function () {
          if ($(this).offset().top < wTop + $(window).height() * 0.8) {
            $(this).addClass('now')
          } else if ($(this).offset().top - $(window).height() >= wTop) {
            $(this).removeClass('now')
          }
        })
      })

完整Demo

<!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">
  <!-- 第一步：引入animate 动画-->
  <link rel="stylesheet" href="./animate.css">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body,
    html {
      width: 100%;
      height: 100%;
    }

    .container {
      width: 100%;
      text-align: center;
    }

    .banner {
      width: 100%;
      height: 700px;
      background: rgb(135, 178, 235);
      line-height: 700px;

      animation: fadeInUp 1s;
    }

    .banner p {
      animation: wobble 1s 0.3s;
    }

    .nav {
      width: 100%;
      height: 200px;
      display: flex;
      line-height: 200px;
    }

    .nav-left {
      flex: 1;
      height: 100%;
      background: rgba(135, 206, 236, .6);
      opacity: 0;
    }

    .nav-right {
      flex: 1;
      height: 100%;
      background: rgba(135, 206, 236, .9);
      /* 2.1 做动画的div先隐藏 */
      opacity: 0;
    }

    /* 动画加now类 */
    .nav.now .nav-left {
      /* 2.2 添加animation动画 */
      animation: fadeInLeft 1s;
      opacity: 1;
    }

    .nav.now .nav-right {
      animation: fadeInRight 1s;
      opacity: 1;
    }


    /* news */
    .news {
      width: 100%;
      height: 200px;
      display: flex;
      line-height: 200px;
    }

    .news-list {
      width: 25%;
      opacity: 0;
    }

    .news-list:nth-child(1) {
      background: rgba(150, 135, 235, .9);
    }

    .news-list:nth-child(2) {
      background: rgba(150, 135, 235, .7);
    }

    .news-list:nth-child(3) {
      background: rgba(150, 135, 235, .5);
    }

    .news-list:nth-child(4) {
      background: rgba(150, 135, 235, .3);
    }



    .news.now .news-list:nth-child(1) {
      animation: fadeInUp 1s;
      opacity: 1;
    }

    .news.now .news-list:nth-child(2) {
      animation: fadeInUp 1s .2s;
      opacity: 1;
      /* 2.3 动画需要延迟的 , transition过度也需要延迟相同毫秒数 */
      transition: all 1s .2s;
    }

    .news.now .news-list:nth-child(3) {
      animation: fadeInUp 1s .4s;
      opacity: 1;
      transition: all 1s .4s;
    }

    .news.now .news-list:nth-child(4) {
      animation: fadeInUp 1s .6s;
      opacity: 1;
      transition: all 1s .6s;
    }

    .hot {
      height: 150px;
      background: rgba(235, 150, 135, 0.3);
      line-height: 150px;
      text-align: center;
      opacity: 0;
    }

    .hot.now {
      animation: fadeInUp 1s;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="banner">
      <p>banner</p>
    </div>
    <div class="nav">
      <div class="nav-left">navLeft</div>
      <div class="nav-right">navRight</div>
    </div>
    <div class="news">
      <div class="news-list">news</div>
      <div class="news-list">news</div>
      <div class="news-list">news</div>
      <div class="news-list">news</div>
    </div>
  </div>
  <div class="hot">hot</div>
</body>


<script src="./jquery-1.8.3.min.js"></script>
<script>
  // 核心代码,封装成函数
  function aniCom(ele) {
    $(window).scroll(function () {
      var winTop = $(window).scrollTop()
      // hot没有在container中，使用 ',' 逗号隔开，表示选择多个div
      $(ele).each(function () {
        // 当前元素距离html的距离 , 如果小于 屏幕滚动的距离 + 屏幕高度 * (在屏幕%几显示动画)
        // 当屏幕滚动到 大于 当前元素的位置时候 , 添加动画
        if ($(this).offset().top < winTop + $(window).height() * 0.8) {
          $(this).addClass('now')
        } else if ($(this).offset().top - $(window).height() >= winTop) {
          $(this).removeClass('now')
        }
      })
    })
  }


  aniCom('.container>div,.hot')


  // offset().top  参照html , 获取距离顶部的位置
</script>

</html>

码农公寓

相关文章