フロントエンドの代名詞ともいえる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」、
アイデア次第で面白い表現が可能になるかもねっ！
ノスタルジックな古民家レストラン「家庭料理 無漏路（むろじ）」。 十勝川温泉・ホテル大平原の女将さんが作るランチ（すき焼き）のビフォーアフター。とっても美味しうございました。
それでは、まったね～！
