menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/06/17
  • JQuery

「twentytwenty.js」画像をビフォーアフター(Before After)で切り替え比較できるJQuery プラグイン

他にもビフォーアフターを実装できるプラグインもありますが「twentytwenty.js」は横だけではなく縦にも対応しているのでより広い範囲で対応できます。
twentytwenty

使用方法

ダウンロード

・twentytwenty(公式サイト)

準備するファイル

・jquery.js
・jquery.twentytwenty.js
・jquery.event.move.js
・twentytwenty.css

外部ファイルの読み込み

head内へ以下を追加します。

JavaScript

デフォルト設定

対象となる要素を指定します。

vertical設定

HTML

デフォルト設定

比較させたい画像を任意の要素で囲みます。

vertical設定

「 data-orientation=”vertical”」を追加。

その他

「default_offset_pct: ここの数値」でラインの位置を設定できます。
twentytwenty.cssをいじればマウスオーバーの際のテキスト表示やラインの色を簡単に変更できます。

ビフォーアフター以外でもその他の画像の比較などに使用できると思います。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11