on:2013年8月5日sponsors2つの画像を重ねて、中央のバーをスライドしてビフォーアフターを切り替えて表示することで、簡単に比較できるようにするjQueryのプラグインを紹介します。↓はただのキャプチャ画像なので動作しません。-GitHubTwentyTwentyのデモTwentyTwentyの使い方TwentyTwentyのデモデモはスクリプトのページに大きく掲載されています。モダンブラウザをはじめ、スマフォ・タブレットでご覧ください。TwentyTwenty中央のバーを左右にスライドすることで、ビフォーとアフターの画像を切り替えます。右にスライドしてビフォーを表示。右にスライドでビフォーバーを左にスライドすると、アフターが表示されます。2つの画像のヴィジュアル的な差異を引き立たせることができます。左にスライドしてアフターページの中程にもデモがあります。オプションでオーバーレイのパネルを設定しています。外部ファイル「jquery.js」とプラグイン「event.move.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。HTML画像は一つ目にビフォー、二つ目にアフターを配置し、ラッパーで内包します。JavaScriptラッパーをjQueryのセレクタで指定し、スクリプトを実行します。$("#container1").twentytwenty();});</script>オプションスクリプトのオプションではバーが左からどれくらい離れているか設定できます。0.7});});</script>スライダーの外観はスタイルシートでカスタマイズが可能で、Sassの変数を修正するだけでスライダーやバーのデザイン、オーバーレイのデザインなどを簡単に変更できます。