ディテールと演出 · 仕上げの小技
ビフォーアフタースライダー前后对比滑块
- 直感的
- 比較しやすい
- 参加感
縦の仕切りがビフォーとアフターの 2 枚を分け、ドラッグすると変化の過程が見えます。
使いどころ
改善前後・レタッチ前後・案 A と B の比較に使います。2 枚の構図が違いすぎると比較が成り立ちません。
パラメータ
drag tracks 1:1 · clip-path inset in sync · no transition on release
レシピ
トランジションなし on releaseビフォーアフタースライダー → drag tracks 1:1 · clip-path inset in sync · no transition on release
AI に渡す一文
ビフォーアフター比較を作ってください。2 枚を重ね、幅 40px の仕切りを初期位置 50% に置き、ドラッグすると clip-path で上の画像をリアルタイムに切り取ります。1:1 で追従し、離したときにトランジションは付けません。