切り抜きに関するサービスで何サイトか、楽しい気になる表現を見かけました。気になっていてたまに調べたりしていたのですが、先日ようやく、「たぶんこれだろう」と思われるjQueryのプラグインを見つけることができたので、記事にしたいと思います。TwentyTwenty「before/after」をキーワードにjQueryプラグインを探すと、他にもありますがこちらのTwentyTwentyについての記事がいちばん多いかなという印象です。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.htmlimgフォルダ-beforeの画像、afterの画像-それに重ねる文字「before」「after」の画像cssフォルダ-foundation.css-twentytwenty.cssjsフォルダ-jquery.event.move.js-jquery.twentytwenty.js(jquery本体は、cdnに読みに行くようhtmlに書いているので、不要)また必要になるときがきたらそのときまた入れればいいし、必要なの以外は捨てちゃいましょう。既存のページに組み込んだり、他にもjQuery使ってるところに入れ込んだり、スライダー表現とかカスタマイズしたらちょっと大変かもしれませんが、今回みたいなほぼデフォルトで使うなら使いやすそうです。効果的な場面でこのプラグインを思い出したい。画像は今回重ね方に工夫がないけど、それでもスライダー動かして切り替えるの、楽しいです!記事の一番下だから大きく表示させてしまえ、とiframeを大きな枠で表示させてみましたが↑、実際、単体ページで作ってiframeで表示させるのも、作る側としてはシンプルで良いかもしれません。この記事を書いた人JPstaff「ミャンマー切り抜き職人」サービスを運営するノシクミ株式会社の日本オフィスに勤務する、新人Webデザイナーです。ミャンマーに学校をつくる活動をしている友人(ミャンマー人)に誘われてミャンマーに遊びにいき、ミャンマーの仏教的な価値観に興味をひかれるようになりました。表示プライバシーポリシ。