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

2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a

[coliss]

ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニック。

[yoshi-na]

CSSだけでどうやって？！と思ったらJavaScript使うんかーい

[rryu]

ドラッグは input type="range" のスタイル変更としてその値の反映をどうするのかと思ったらそこはJSだった。

[udddbbbu]

まあ確かに「CSSだけで」とは言ってないな。行ってないけどさ…

[mohno]

「ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニック」←スライダーのためのCSSがあるわけじゃなく実装テクニックということか。知らなかったら絶対分からないな。

[tsuki-rs]

2つの画像をsectionで内包して〜で無理だわ〜ってなった。

[solidstatesociety]

いい応用

[otchy210]

おー、なるほど。range をそういう風に使うのか。アイディア賞だな。

[HiddenList]

そんな　ミスリード誘っても　クルミは得られないよ？

[field_combat]

input type="range"か