Loading...

トカチニッチ

北海道十勝の超ローカルウェブメディア「トカチニッチ」ニッチな情報毎日更新中!

Google翻訳

ビフォーアフターの画像をわかりやすく比較するjQueryプラグイン「twentytwenty.js」がめちゃオモロ。

徳川埋蔵

徳川埋蔵

137 VIEW
投稿記事
注目タグ

フロントエンドの代名詞ともいえるWEB屋として、制作に関するネタの引き出しを少しでも増やしたい…そんな筆者の個人的ニッチな備忘録である。

※WEB制作に携わって十数年、ずっと手さぐり暗中模索まっしぐら!

今後WEB制作の業務で「2枚の画像をわかりやすく比較したいべさっ」という依頼が猛烈に舞い込む…気がする。気がする。そんな気が本当にしているので、事前に調べてみることにするよっ!

なんて意気込んでみたのはいいものの、イチから自作で作るのはちょっと…。今回はあまり時間をかけずにサクッと設置したい。そういう時は「Google先生」に解決方法を探ってもらうおう~。

数ある中で辿り着いた一つの答え。jQueryプラグイン「twentytwenty.js」。これが設置もカンタンで、PC・スマホ両対応。使い心地も良かったので、ここにメモとして残しておくよ。

デモ画像

まずは↓コチラのデモ画像をさわってみよう。
※中央のスライドバーを左右に動かしてみてね。

空から眺めると、何となく北海道の形をしているように見えない?
実はこれ、(※いずれ詳しく紹介すると思う)豊頃町にある佐々田沼という沼なんだ。
夏はマウンテンバイク(MTB)のイベントが開催されたり、冬はしばれあがって(凍って)全面真っ白に! こうして夏と冬の景色を比較してみるのも面白いよね~!

次は比較画像の正しい?使い方。
やっぱりビフォーアフターと言えば、美容室のカット前後や、家のリフォーム前後といった2枚の画像を比較するのに使うのが王道だよね。

↑こちらはトカチニッチの記事でも紹介されていた帯広市のご機嫌な理美容室『↗ 1848(いやしや)』さんでのカット風景。こうしてカット前後の比較画像を見ると、その変化がとっても分かり易いよね~

※奥の「鼻毛問題スボッ!と解決」掲示物がどうしても気になる…

「twentytwenty.js」の設置方法

では実際に「twentytwenty.js」を設置方法してみよう。
まずは本家サイトから「twentytwenty.js」ファイル一式をダウンロード!

jQuery TwentyTwenty Plugin
↗ https://zurb.com/playground/twentytwenty

セッティング

この中で使用するファイルは下記の3つだけ。

  • jquery.twentytwenty.js
  • jquery.event.move.js
  • twentytwenty.css

head内に下記を追加してファイルを読み込む。
※「jquery.js」も忘れずにねっ

<link href="twentytwenty.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>

HTML

比較したい2枚の画像を、任意の要素で囲う。
※一枚目が左側で、二枚目が右側になるよ

<div id="hogehoge">
  <img src="before.jpg">
  <img src="after.jpg">
</div>

JavaScript

任意の要素に対して「twentytwenty」を設定してあげよう。

$(window).load(function() {
  $("#hogehoge").twentytwenty();
});

以上!たったこれだけで設置できちゃった!

「twentytwenty.css」をいじればスライドバーのデザインなど見た目の表現も色々変えられるみたいだし、縦位置の切り替えもできるみたいだけど、※長くなるので細かい解説は省くよ。
詳しくは本家サイトを見るか、「twentytwenty.js」でググってみてね!(逃っ!)

そんな「twentytwenty.js」、
アイデア次第で面白い表現が可能になるかもねっ!

ノスタルジックな古民家レストラン「家庭料理 無漏路(むろじ)」。 十勝川温泉・ホテル大平原の女将さんが作るランチ(すき焼き)のビフォーアフター。とっても美味しうございました。

それでは、まったね~!


この記事が気に入ったら

※投稿内容に関係のないコメントや、不適切な表現に該当すると判断したコメントは、投稿者に断りなく削除する場合があります。

あらら…大人が煩悩を炸裂されている!
曇りなき眼でお願いしないと叶わないと思いま~す。

BY不労所得を希望する者

えっ?ピンクの神様?エロいの?
全ての願いがかなう神様はここで良いですか?

WordPressのバックアップ方法がわかりません。
SEOナンチャラもちんぷんかんぷんです。
Goproの新しいやつとミラーレスカメラが欲しいです。
ついでに地位と名誉もお願いします。

>誰が
ピンクの服着た神様にお願いしたら、実現するって聞きま… 都市伝説?!

あ、↓はby猛獣さん宛てです!

byかず

↓なっかまー!

byかず

誰がやんのさ!?(荒

↓はいはいはいはい!!!!!!

でもHTMLとネットワーク系の話はトンと頭に入ってこないです!(悲

by猛獣

↓はい。はーい!
料理写真のビフォーアフターにピッタリ!

でもHTMLとネットワーク系の話はトンと頭に入ってこないです!(悲

byかず

この機能…ライターさんで使いたい方おられますでしょうか。
居れば簡単に投稿できるシステムを検討しますが…どんなもんでしょう。
by埋蔵

うおっ!コレ!欲しかった機能だ!
でも、HTMLはちんぷんかんぷんw

私の脳内のどこかの部位がHTMLを覚えることに抵抗している。。。。。。
byかず

「熟成前、熟成後」「塗装前、塗装後」「研磨前、研磨後」とか、楽しそう!!!

おかっぱミニ虎(^o^)、有名人~

BYおかっぱ虎(基本サイズ)

なにこれ!なにこれ!なにこれ!たのしい!!!

  • コメント
  • ランキング
  • オススメ