『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。
2 つの画像の視覚的な違いを他の人に示す必要がある場合があります。通常、1 つは変更前の画像で、もう 1 つは変更後の画像です。たとえば、2 つの画像を並べて写真加工の効果を示します。たとえば、一部の美容師の Web サイトでは、特定の美容トリートメントの効果や、特定の地理的領域における災害の結果を表示したいと考えています。
最も一般的な解決策は、2 つの画像を並べて配置することです。ただし、この場合、人間の目は非常に顕著な違いしか認識できず、そのような小さな変化を検出することはできません。比較がそれほど重要ではない場合、または 2 つの画像の差が非常に大きい場合は、この方法で問題ありませんが、その他の場合には、より良い方法が必要です。
ユーザー エクスペリエンスの観点から、この問題には多くの解決策があります。一般的な解決策は、GIF または CSS アニメーションを使用して、同じ場所に 2 つの画像を続けて表示することです。これは、2 つの写真を並べて表示するよりもはるかに優れています。しかし、ユーザーは画像全体を目で捉えるまでに数回待つ必要があるため、違いを見つけるには時間がかかります。
英国の大手報道機関であるガーディアンからの、2011 年のロンドン暴動の悲惨な結果をユーザーが比較できるようにするインタラクティブな画像比較ウィジェットの例。ユーザーは 2 つの画像間の白い垂直バーをドラッグできますが、「これはドラッグできます」というメッセージは表示されません。そのため、ヘルプ テキスト (「スライダーを移動する...」) が必要です。理想的には、優れた学習可能なインターフェイスにはヘルプ テキストは必要ありません。
より実用的な解決策は、「画像比較スライダー」です。 2 つの画像を重ねて表示し、ユーザーが仕切りをドラッグしてどちらを表示するかを選択できるようにします。もちろん、そのようなコントロールは実際には HTML には存在しません。現実の要素を使ってそれをシミュレートする必要がありますが、この効果を達成する例は長年にわたって数多くあり、通常は JavaScript フレームワークと大量の JS コードが必要です。
いくつかのバリエーションでは、ユーザーはドラッグする代わりにマウスを直接動かすことができます。これの利点は、ユーザーが気づきやすく使いやすいことですが、その体験は非常にエキサイティングです。
そのような制御を実現する簡単な方法はありますか?もちろんあります、そしてそれは2つあります！
よく考えてみると、画像比較スライダーには通常、画像と、別の画像を表示するために使用される水平方向にサイズ変更可能な要素が含まれています。通常、これは JavaScript フレームワークが必要な場合であり、トップ画像を水平方向にサイズ変更可能にします。ただし、要素のサイズを変更可能にするために必ずしもスクリプトが必要というわけではありません。 CSS3 には、resize というプロパティがあります。
このプロパティについて聞いたことがなくても、
