ミャンマー切り抜き職人

ログイン

webで、切り抜きbefore/after感のある表現=jQueryプラグインTwentyTwenty

切り抜きに関するサービスで何サイトか、楽しい気になる表現を見かけました。日本でも海外でも。
ずっと気になっていてたまに調べたりしていたのですが、先日ようやく、「たぶんこれだろう」と思われるjQueryのプラグインを見つけることができたので、記事にしたいと思います。

TwentyTwenty

「before/after」をキーワードにjQueryプラグインを探すと、他にもありますがこちらのTwentyTwentyについての記事がいちばん多いかなという印象です。
TwentyTwentyのページ(このページ内にデモも載ってます)


2019.12.19追記:Wordpressのアップデートで、twenty twentyというテーマが登場してました。だってもうすぐ2020年ですもんね。。。検索するとき紛らわしくなるなー


やってみる

  1. ダウンロード:
    TwentyTwentyのサイトにいくと「ダウンロードTwentyTwenty」のボタンがあります。わかりやすくてありがたいです(英語のサイトは常に右クリック⇒翻訳で…)
    TwentyTwentyのページzipでダウンロードされるので、展開して、zipは捨てておきます。料理も、作りながら使ったものは洗って片付けていきたい派です。
  2. index.htmlを開く:
    展開した「twentytwenty-master」フォルダ内にindex.htmlファイルがあって、4種類のデモが載っています。上下に切り替えるか左右で切り替えるか。斜めに切り替えるやつも見たことあるんですけど、プラグインじゃなくて手作りだったのかもしれません。せっかくあるからこのindex.htmlをそのまま使います。失敗したときに再DLすると面倒なのでバックアップ用にコピーをとってから作業します。(早くgit使えるようにならないと…)
  3. 使いたい画像を用意:
    beforeの画像とafterの画像を1枚ずつ用意します。私は今回、以前本サービスのバナーづくりで使ったお坊さんの画像をリサイズだけして再利用します。index.htmlで使われてる画像が幅640pxだったから、縦横比違うけど幅だけ同じ640にしてみました。beforeもafterもどちらも。 ファイル名は「obousan_before.jpg」と「obousan_after.png」です。切り抜いてるからafterはpngなんです。透過してるから。例のほうはbefore/afterともにjpgだけど大丈夫かな。とりあえずindex.htmlが使ってるimgフォルダに入れておきます。素材として使うお坊さんの画像(切抜き前)素材として使うお坊さんの画像(切抜き後)
  4. htmlの画像ファイルを、自分で用意したものに書き換え:
    画像が用意できたのでindex.html内のimgのsrcファイルを、お坊さん画像に書き換えていきます。
    imgのファイル名を書き換えてhtmlを開くともうできてる~感動~簡単~楽しい~!
  5. サーバアップロード:
    展開した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で表示させるのも、作る側としてはシンプルで良いかもしれません。

この記事を書いた人

JPstaff-01