2つの画像を比較するスライダーを数行のコードで実装

CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
...
coliss.com

2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。
ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装することができます。

HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type=”range”で実装します。input type=”range”は、決められた最小値と最大値の間で値を取得できるフォームの要素です。

<div class="compare">
  <section class="before">
    <img src="Runner.svg" alt="" />
  </section>
  <section class="after">
    <img src="Roboto.svg" alt="" />
  </section>
  <input type="range" id="range">
</div>

2つの画像はCSS Gridで互いに重ね、CSSのmaskでそれぞれの画像を表示します。縦線のレンジバーはいっぱいに伸ばして、スライダー内のどこでも操作できるようにします。

@layer demo {
  .compare {
    display: grid;
    
    > * {
      grid-area: 1 / 1;
    }
    
    > section {
      display: grid;
      place-content: center;
    }
  }
  
  .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);
  }
  
  input[type="range"] {
    z-index: 1;
    appearance: none;
    background: transparent;
    cursor: pointer;
    &::-webkit-slider-thumb {
      appearance: none;
      width: 4px;
      height: 100dvh;
      background-color: CanvasText;
    } 
    &::-moz-range-thumb {
      appearance: none;
      width: 4px;
      height: 100dvh;
      background-color: CanvasText;
    }
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }
  html {
    block-size: 100%;
    color-scheme: dark light;
  }
  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
  } 
  img {
    max-block-size: 80dvh;
    max-inline-size: 100%;
  }
}

画像の切り替えは、JavaScriptで行います。スライダー値をカスタムプロパティに書き込み、それがmaskの–pos値になります。

range.oninput = () =>
  document.body.style.setProperty('--pos', range.value + '%')
inserted by FC2 system