webで、切り抜きbefore/after感のある表現＝jQueryプラグインTwentyTwenty
切り抜きに関するサービスで何サイトか、楽しい気になる表現を見かけました。日本でも海外でも。
ずっと気になっていてたまに調べたりしていたのですが、先日ようやく、「たぶんこれだろう」と思われるjQueryのプラグインを見つけることができたので、記事にしたいと思います。
TwentyTwenty
「before/after」をキーワードにjQueryプラグインを探すと、他にもありますがこちらのTwentyTwentyについての記事がいちばん多いかなという印象です。
TwentyTwentyのページ（このページ内にデモも載ってます）
2019.12.19追記：Wordpressのアップデートで、twenty twentyというテーマが登場してました。だってもうすぐ2020年ですもんね。。。検索するとき紛らわしくなるなー
やってみる
- ダウンロード：
TwentyTwentyのサイトにいくと「ダウンロードTwentyTwenty」のボタンがあります。わかりやすくてありがたいです（英語のサイトは常に右クリック⇒翻訳で…）
TwentyTwentyのページzipでダウンロードされるので、展開して、zipは捨てておきます。料理も、作りながら使ったものは洗って片付けていきたい派です。 - index.htmlを開く：
展開した「twentytwenty-master」フォルダ内にindex.htmlファイルがあって、4種類のデモが載っています。上下に切り替えるか左右で切り替えるか。斜めに切り替えるやつも見たことあるんですけど、プラグインじゃなくて手作りだったのかもしれません。せっかくあるからこのindex.htmlをそのまま使います。失敗したときに再DLすると面倒なのでバックアップ用にコピーをとってから作業します。（早くgit使えるようにならないと…） - 使いたい画像を用意：
beforeの画像とafterの画像を1枚ずつ用意します。私は今回、以前本サービスのバナーづくりで使ったお坊さんの画像をリサイズだけして再利用します。index.htmlで使われてる画像が幅640pxだったから、縦横比違うけど幅だけ同じ640にしてみました。beforeもafterもどちらも。 ファイル名は「obousan_before.jpg」と「obousan_after.png」です。切り抜いてるからafterはpngなんです。透過してるから。例のほうはbefore/afterともにjpgだけど大丈夫かな。とりあえずindex.htmlが使ってるimgフォルダに入れておきます。
- htmlの画像ファイルを、自分で用意したものに書き換え：
画像が用意できたのでindex.html内のimgのsrcファイルを、お坊さん画像に書き換えていきます。
imgのファイル名を書き換えてhtmlを開くともうできてる～感動～簡単～楽しい～！ - サーバアップロード：
展開したzipのmasterフォルダ内には参考資料的なものがたくさん入ってるので、htmlのソースを見ながら必要なのだけアップロードします。- index.html
- imgフォルダ
－beforeの画像、afterの画像
－それに重ねる文字「before」「after」の画像 - cssフォルダ
－foundation.css
－twentytwenty.css - jsフォルダ
－jquery.event.move.js
－jquery.twentytwenty.js
(jquery本体は、cdnに読みに行くようhtmlに書いているので、不要)また必要になるときがきたらそのときまた入れればいいし、必要なの以外は捨てちゃいましょう。（必要なものだけ残せてるかのローカルでのチェックにもなるし）
完成
既存のページに組み込んだり、他にもjQuery使ってるところに入れ込んだり、スライダー表現とかカスタマイズしたらちょっと大変かもしれませんが、今回みたいなほぼデフォルトで使うなら使いやすそうです。効果的な場面でこのプラグインを思い出したい。画像は今回重ね方に工夫がないけど、それでもスライダー動かして切り替えるの、楽しいです！
記事の一番下だから大きく表示させてしまえ、とiframeを大きな枠で表示させてみましたが↑、実際、単体ページで作ってiframeで表示させるのも、作る側としてはシンプルで良いかもしれません。
