实现前端中隔线滑动对比预览效果

废话不多说,直接上效果图:

实现前端中隔线滑动对比预览效果

源码:中隔线滑动案例

你可以先别往下看,自己想想怎么实现~~ 本文的实现只是作者的方式,你当然可以使用自己的方式。

实现思路

  • 将输入内容做成中隔线的样子,拖动后触发数值变化
  • 根据数值变化,设置横向百分比的遮罩

定义中隔线

<div class="compare">
  <!-- range 元素默认 0 - 100 -->
  <input type="range" id="range">
</div>

然后我们给输入框添加事件:

// html 中标记有 id 的元素,可以在 js 里直接使用同名 dom
range.oninput = () => {
  document.body.style.setProperty('--pos', range.value + '%');
}

这样我们就能通过用户的拖拽往 css 里写入变量了。但是还有个问题,这个 range 他不是中隔线的样子,需要定义 css 样式:

input[type="range"] {
  z-index: 1;  // 为了置顶
  appearance: none;
  background: transparent;
  cursor: pointer;
}

其中 appearance:none 是为了不显示拖动条,不设置的话就这样:

实现前端中隔线滑动对比预览效果

这样设置完后,效果如下:

实现前端中隔线滑动对比预览效果

为什么是个红点呢?因为我的电脑主题色是红色的,如果你是火狐,或者windows,就是一个白色的圆点,这个就是原生的 input 拖拽 bar 的颜色。我们需要把这个点变成一条线:

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 4px;
  height: 390px;
  background-color: hotpink;
}

-webkit-slider-thumb 是 webkit 内核浏览器特有的样式,对于 firefox 需要另外写兼容:

input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 4px;
  height: 390px;
  background-color: hotpink;
}

这样他就变成了一条自定义颜色的中隔线。

定义遮罩

我们先把两张图片放置一下:

<div class="compare">
  <section class="before">
    <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2952&amp;q=80" />
  </section>
  <section class="after">
    <img src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80" />
  </section>
  <!-- range 元素默认 0 - 100 -->
  <input type="range" id="range">
</div>

现在长这样:

实现前端中隔线滑动对比预览效果

我们现在加上遮罩属性:


.before {
  mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
}

.after {
  mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
}

mask 实战可以参考 使用 mask 实现视频弹幕人物遮罩过滤

本案例中,mask 属性接受一个线性渐变,配置为从左到右,#000 0 表示在 0% 处是黑色的,#0000 0 表示在 0% 处是黑色的,但是是透明的。var(--pos, 50%) 表示读取 css 变量,如果读取不到,默认是 50%,他是一个渐变停止点。

举个例子,比如 .before { mask: linear-gradient(to right, #000 0, 20%, #0000 0) } 表示前 20% 的区域有内容:

图片与 mask 生成的渐变的 transparent 的重叠部分,将会变得透明;而与 mask 渐变有颜色(这里是黑色)的地方交集就会原样显示

实现前端中隔线滑动对比预览效果

现在的效果图长这样:

实现前端中隔线滑动对比预览效果

我们还需要把他们叠在一起布局。

mask 兼容性:

实现前端中隔线滑动对比预览效果

设置网格布局

添加样式:

.compare {
  display: grid;
}

.compare > * {
  grid-area: 1 / 1;
}

可以看到他们重叠在一起了:

实现前端中隔线滑动对比预览效果

解释一下 grid-area,它用于指定网格项目在网格容器中的位置和跨度。这个属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写形式,因此它可以同时设置项目的起始行、起始列、结束行和结束列。

例如,如果要将一个项目放置在网格容器的第一行第一列,并跨越两行两列,可以这样写:

.item {  
  grid-area: 1 / 1 / 3 / 3;  
}

本文的案例中,就是强制所有元素都在第一行第一列,因为就没有分行分列。


至此,核心实现就完成啦~

源码:中隔线滑动案例

原文链接:https://juejin.cn/post/7339830464000639011 作者:小肚肚肚肚肚哦

(0)
上一篇 2024年2月27日 下午4:22
下一篇 2024年2月27日 下午4:33

相关推荐

发表回复

登录后才能评论