乐趣区

关于javascript:巧用阴影mask以及css变量来实现元素聚焦效果

jiezi

巧用暗影、mask 以及 css 变量来实现元素聚焦成果

前言

嘿，之前我如同有段时间没写博客了。其实最大的起因就是我变得有点懒了。不过，当初毕业快到了，我也不能始终偷懒上来啊。对我来说，抉择写代码作为职业方向是一件好玩的事件，而在此方向上，继续学习是最重要的事件之一。写博客就是一种十分好的形式来帮忙本人继续学习，并且能够当作本人的成长记录，回味无穷。

最近遇到了一个这样的需要，有一个音讯列表，心愿能够在某条音讯中实现聚焦，即除了应该聚焦的音讯外的音讯都会被一个黑蒙蒙的遮罩所遮住。

那么遇到这种不常见的需要，咱们首先就须要思考技术计划。

技术计划

1.Mask 遮罩

我最开始想到的是通过应用 CSS 突变以及遮罩的形式来实现。

具体思路 如下，首先利用 IntersectionObserver 监听指定元素，如果它进入视图中，就能够将其 top、height 属性以 「CSS 变量」 的形式赋值给 Mask 元素，Mask 即可通过 CSS 变量的形式进行突变计算，从而最终显示出聚焦成果。

整个 HTML 文档构造如下：

<div class="box"> // 滚动列表盒子
    <ul class="list"> // 列表盒子，利用 after 伪元素来实现遮罩
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
      <li class="item">6</li>
      <li class="item">7</li>
      <li class="item">8</li>
      <li class="item">9</li>
      <li class="item" id="target">10 (target)</li> // 须要聚焦的元素
      <li class="item">11</li>
      <li class="item">12</li>
      <li class="item">13</li>
    </ul>
  </div>

JS 代码的次要作用其实就是去监听指标元素的显示，从而切换遮罩显示：

 const intersectionObserver = new IntersectionObserver((entries) => {const entry = entries[0]
    if (!entry) return
    const Mask = document.querySelector('.list')
    if (entry.isIntersecting) {
      // 可视畛域
      const rect = entry.boundingClientRect
      const {height} = rect
      Mask.style.setProperty('--height', height + 'px')
      Mask.style.setProperty('--top', entry.target.offsetTop + 'px')
    } else {
    // 不显示，则设置突变令其通明
      Mask.style.setProperty('--height', entry.rootBounds.height + 'px')
      Mask.style.setProperty('--top', 0 + 'px')
    }

  });
  // 开始监听
  intersectionObserver.observe(document.querySelector('#target'));

咱们利用 mask，即mask 中不通明的局部会使得背景图被遮住 的个性来管制遮罩的地位。

最要害的 CSS 变量计算外围代码如下：

.list::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.46);
      mask: linear-gradient(180deg, #000 calc(var(--top) -  var(--height)), transparent var(--top), #000 calc(var(--top) + 2 * var(--height)));
    }

于是，一个简略的聚焦成果就实现啦～

最终成果能够点击利用 mask 和 css 变量实现元素聚焦性能所示

2.BoxShadow 暗影遮罩

对于 box-shadow 属性，咱们可能都不太生疏，咱们常常用它来实现各种类 3D 的款式，例如按钮、卡片等组件中。然而，当咱们将 box-shadow 的扩散半径调成无限大的时候，它不就成为了一个最好用的遮罩了嘛？而且也并不会遮挡住指标元素。

「留神」: 这里须要留神的是，box-shadow暗影会被后续相邻的元素所遮挡，这时能够配合绝对定位来解决。

这种形式与前者相比，代码量少得可不是一丁半点，具体的含糊成果能够依据具体须要来自行调节。

外围代码如下：

 .focus {
      position: relative;
      box-shadow: 0px 0px 28px 1000px rgba(0, 0, 0, 0.59);
}
 const intersectionObserver = new IntersectionObserver((entries) => {const entry = entries[0]
    const target = entry.target
    if (!entry) return
    if (entry.isIntersecting) {
      // 可视畛域
      target.classList.add('focus')
    } else {target.classList.remove('focus')
    }

  });
  // 开始监听
  intersectionObserver.observe(document.querySelector('#target'));

最终成果能够点击利用暗影实现元素聚焦性能所示

总结

以上是两种利用 CSS 技术实现元素聚焦成果的计划。尽管这两种计划都是利用 CSS 的个性来达到遮罩的成果，然而它们的实现形式有所不同，对应的 CSS 属性和代码也有所区别。

对于应用 mask 遮罩的形式，须要利用 CSS 变量以及突变来管制遮罩的地位和成果，比拟实用于须要实现简单突变成果的场景；而对于应用 box-shadow 遮罩的形式，则绝对更加简略，代码量更小，比拟实用于一些简略的遮罩成果。

不过无论是哪种计划，它们都提供了一种新的思路和思考形式，让咱们在开发中更加灵便和高效地使用 CSS 技术。

我是 <span style=”color:#87481f;font-weight:bold”>「盐焗乳鸽还要香锅」</span>，喜爱我的文章欢送关注噢

  • github 链接 https://github.com/1360151219
  • 博客链接是 strk2.cn
  • 掘金账号、知乎账号、简书《盐焗乳鸽还要香锅》
  • 思否账号《天天摸鱼真的爽》
退出移动版