【前端必会】适合首页的滚动过渡（CSS transition）

背景
经常看到一些首页的过渡效果不错，闲来无事，实现个基本效果

直接上代码

<body>
  <div id="1" class="block build-in-scale-up"><h1>Hello1</h1></div>
  <div id="2" class="block build-in-scale-up"><h1>Hello2</h1></div>
  <div id="3" class="block build-in-scale-up"><h1>Hello3</h1></div>
  <div id="4" class="block build-in-scale-up"><h1>Hello4</h1></div>
  <div id="5" class="block build-in-scale-up"><h1>Hello5</h1></div>
</body>
<script>
  function addAni() {
    let panels = document.getElementsByTagName("div");
    for (let i = 0; i < panels.length; i++) {
      let p = panels[i];
      let id = p.getAttribute("id");
      let scrollTop = document.body.scrollTop;
      let scrollHeight = document.body.clientHeight;
      let offsetTop = p.offsetTop;
      let clientHeight = document.body.clientHeight;
      console.log(
        id,
        scrollHeight,
        "scrollTop",
        scrollTop + clientHeight - 100,
        "panel offsetTop",
        offsetTop
      );

      if (scrollTop + clientHeight - 100 > offsetTop) {
        p.classList.add("build-in-animate");
      } else {
        p.classList.remove("build-in-animate");
      }
    }
  }
  window.addEventListener("scroll", addAni);
  addAni();
</script>
<style>
  .block {
    height: 300px;
    background-color: bisque;
    margin: 5px;
  }
  .build-in-scale-up.build-in-animate {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  .build-in-scale-up {
    /* opacity: 0; */
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(0.96) translateY(24px);
  }
</style>

效果如下：
滚动到元素刚出现时，呈现一个放大的效果。
图1：刚出现的效果

图2：继续滚动Hello3面板会放大到最终位置

总结

  1. 适当的过渡效果让页面没那么生硬
  2. 当滚动到元素出现时，添加样式。实现原理与滚动加载差不多。不过也有点区别（scrollTop + clientHeight - 100 > offsetTop）
  3. 添加样式后会展现过渡效果
posted @ 2022-10-10 00:28  李同学的教室  阅读(906)  评论(0)    收藏  举报