美容系のサイトなどでも使われればいいなと思うエフェクト。

Before & Afterなのですが、日本ではLP等でも比較という意味で、こういうケースがこうなりますよの対比を画像で掲載していたりするけど、そんな表現を横にならべてするならこうなるを表現する方法ってのがあるよと言う事で載せて見る。

[cq_vc_beforeafter beforeimage=”11978″ afterimage=”11979″ autoslide=”0″ handlestyle=”grass”]

機能自体はビジュアルコンポーザーを使って導入するのが簡単なので何個かのアドオンを記載しておこうと思います。

Royal Before After Image Add-On for Visual Composer

その名もずばりですね。

Visual Composer Extensions All in One

これはビジュアルコンポーザーの全部入りみたいなアドオンです。

全部で57個の機能をアドオン出来るという。

上記の画像はその中の Before & Afterという機能をつかっています。

ここからはJqyeryのスクリプトをご紹介。

これで自力で実装出来ますね。

TwentyTwenty

まず、TwentyTwenty からスクリプトをダウンロードします。

<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.event.move.js"></script>
<script type="text/javascript" src="js/jquery.twentytwenty.js"></script>
<script type="text/javascript">
  $(window).load(function(){
    $('.container').twentytwenty({default_offset_pct: 0.5});
  });
</script>

ヘッダーなどに自分の環境にあわせて必要なファイルをインクルードします。

default_offset_pct: 0.5

この部分の0.5を0~1の範囲で指定して上げる事でセパレーターの開始位置を指定します。

<div id='container1' class='twentytwenty-container'>
  <img src='sample-before.png'>
  <img src='sample-after.png'>
</div>

で画像を指定して上げてスクリプトが適応されるように指定するのですね。

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

まあ、レガシーブラウザについては排他にしておく方が良いと思いますのでIE対応は10以降で良いのでは?

検証してみるとサポートブラウザもひと通り大丈夫で、iPhoneやAndroidのスマートフォン、iPadなどのタブレットでも問題なく動きます。

TwentyTwenty

TwentyTwenty Git