TwentyTwentyの設定と使い方 – 2枚の画像をスライドさせて比較するプラグイン

プラグイン「TwentyTwenty」を追加すると、2枚の画像を重ねて表示させ、中央のスライドバーでビフォーアフターを切り替えることができます。2枚の画像を比較する際に使うと便利です。

主要ブラウザ「Chrome」「Safari」「FireFox」「IE9+」だけでなく、レスポンシブデザイン「iOS」「Android」に対応しているのも特徴です。

設定

プラグインからTwentyTwentyを追加して有効化させます。

特に設定は必要ありません。下記ショーコードで2枚の画像を囲むだけで機能します。

例えば、レタッチ前とレタッチ後の写真を比較してみます。

中央スライダーの矢印をドラッグして、左右に動かせばビフォーアフターを切り替えできます。スライダーより左はビフォー画像、スライダーより右はアフター画像です。

メディアにリンクを付けても無効化されます。

また、サイズの異なる画像を使うとレイアウトが崩れる可能性がありますので、できるだけ同じ大きさの画像を使って下さい(異なる大きさの画像でも機能はします)。

最後に

2枚の画像を比較させたい時に使うと便利なプラグインです。

他にも、スライドさせると文字が表示されるといったギミック的な使い方もできますから、発想次第ではいろんな応用が利くと思います。

スポンサーリンク
スポンサーリンク