css实现毛玻璃滚动效果

最新推荐文章于 2022-11-25 08:29:06 发布

小小•愿望

最新推荐文章于 2022-11-25 08:29:06 发布

阅读量192

点赞数 1

分类专栏： JavaScript 前端 css3 文章标签： html 前端 css javascript

本文链接：https://blog.csdn.net/qq_27829333/article/details/125946578

版权

前端同时被 3 个专栏收录

24 篇文章 1 订阅

订阅专栏

JavaScript

21 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

本文展示了如何使用HTML和CSS创建带有动态模糊背景和圆形渐显效果的图片滤镜。通过JavaScript监听滚动事件，实现当图片进入视窗一定范围时，圆环图片的透明度变化，模拟毛玻璃效果。适合前端开发者学习CSS3动画和响应式布局技巧。

摘要由CSDN通过智能技术生成

效果图展示（建议使用手机模式）：在线运行

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <style>
      .filter_wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .filter_bg_wrapper {
        filter: blur(8px);
        height: 100%;
        width: 100%;
      }

      .filter_cover_img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        clip-path: circle(0%);
      }

      img {
        width: 100%;
        vertical-align: top;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <img
        src="https://img-blog.csdnimg.cn/5a87670618fe4cc59d938f77d41cb816.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/2de8a9c47e054f7ba7bd959ea5041130.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/1f4a4d8d488c46f8acad53892fed08e6.jpeg"
        alt=""
      />
      <div class="filter_wrapper" id="filter_wrapper">
        <div class="filter_bg_wrapper" id="filter_bg_wrapper">
          <img
            src="https://img-blog.csdnimg.cn/0cdb2d2f90b143c491a5a4b92075fa04.jpeg"
            alt="占位毛玻璃图片"
          />
        </div>
        <img
          id="filter_cover_img"
          class="filter_cover_img"
          src="https://img-blog.csdnimg.cn/0cdb2d2f90b143c491a5a4b92075fa04.jpeg"
          alt="清晰圆环图片"
        />
      </div>
      <img
        src="https://img-blog.csdnimg.cn/7b6c25d2f32645f986a26648ef0b0001.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/fbc54f7c6e2a41889d3221e1d3223127.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/d6316c5661344816bbd664a1510f9978.jpeg"
        alt=""
      />
      <div class="filter_wrapper" id="filter_wrapper">
        <div class="filter_bg_wrapper" id="filter_bg_wrapper">
          <img
            src="https://img-blog.csdnimg.cn/21d2c257112a42d88bcf48892bb3d3c3.jpeg"
            alt="占位毛玻璃图片"
          />
        </div>
        <img
          id="filter_cover_img"
          class="filter_cover_img"
          src="https://img-blog.csdnimg.cn/21d2c257112a42d88bcf48892bb3d3c3.jpeg"
          alt="清晰圆环图片"
        />
      </div>
      <img
        src="https://img-blog.csdnimg.cn/6013a8f72e6940568964892fa4c48469.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/b4dc389c8cdb404281cd86780e33828f.jpeg"
        alt=""
      />
      <img
        src="https://img-blog.csdnimg.cn/dbe81da475594345b34f249745c24bd0.jpeg"
        alt=""
      />
    </div>
  </body>
  <script>
    /**
     * 监听滚动条
     */
    window.onscroll = function () {
      handleFilterScroll();
    };

    function handleFilterScroll() {
      let scrollY = window.scrollY;
      let wrappers = document.getElementsByClassName("filter_wrapper");
      let filter_cover_imgs =
        document.getElementsByClassName("filter_cover_img");
      for (let index = 0; index < wrappers.length; index++) {
        const element = wrappers[index];
        let offsetH = element.offsetHeight; // 获取元素的高度
        let offsetW = element.offsetWidth; // 获取元素的宽度
        let offsetT = element.offsetTop; // 元素到offsetParent顶部的距离
        let percentMax = Math.sqrt(offsetH * offsetH + offsetW * offsetW) / 2;
        let oneTen = document.body.clientHeight / 10; // 保证屏幕十分之一处全显示
        let scrollYA = scrollY + offsetH / 2 + oneTen;
        if (scrollYA > offsetT && scrollYA < offsetT + offsetH + oneTen) {
          let percent = ((scrollYA - offsetT) * 100) / percentMax;
          filter_cover_imgs[index].style.clipPath = `circle(${percent}%)`;
        } else {
          if (scrollYA - offsetT < 0) {
            filter_cover_imgs[index].style.clipPath = `circle(${0}%)`;
          }
        }
      }
    }
  </script>
</html>