2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン(TwentyTwenty)をご紹介します。
「基本的な使用法」「垂直方向」「並んで」、3パターンの利用方法を紹介します。
Contents
ディスプレイ広告
2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン(TwentyTwenty)のCSSファイル読込
※foundation.css、twentytwenty-no-compass.cssファイルを読み込みます。
<link href="css/foundation.css" rel="stylesheet" type="text/css" /> <link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" />
2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン(TwentyTwenty)のHTML記述
※「基本的な使用法」「垂直方向」「並んで」の3パターンのビフォー・アフター画像を用意しました。
<div class="row" style="margin-top: 2em;"> <div class="large-4 columns"> <h3>基本的な使用法</h3> <p>プラグインの基本的な使用法を示します。</p> </div> <div class="large-8 columns"> <div class="twentytwenty-container"> <img src="img/1_1.jpg" /> <img src="img/1_2.jpg" /> </div> </div> </div> <div class="row" style="margin-top: 2em; margin-bottom: 2em;"> <div class="large-4 columns"> <h3>垂直方向</h3> <p>上下にスライドする様子を示します。</p> </div> <div class="large-8 columns"> <div class="twentytwenty-container" data-orientation="vertical"> <img src="img/1_1.jpg" /> <img src="img/1_2.jpg" /> </div> </div> </div> <div class="row" style="margin-bottom: 2em;"> <div class="large-4 columns"> <h3>並んで</h3> <p>一度に多重比較を使用します。</p> </div> <div class="large-4 columns"> <div class="twentytwenty-container"> <img src="img/1_1.jpg" /> <img src="img/1_2.jpg" /> </div> </div> <div class="large-4 columns"> <div class="twentytwenty-container"> <img src="img/1_1.jpg" /> <img src="img/1_2.jpg" /> </div> </div> </div>
2枚のビフォー・アフター画像をわかりやすく比較するJavaScript(TwentyTwenty)記述
※jquery.min.js、jquery.event.move.js、jquery.twentytwenty.jsを読み込みます。$(“ビフォー・アフター画像表示対象エリア”).twentytwenty({オプション})を記述します。オプションではビフォー・アフター画像のデフォルトの表示比率等を設定します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="js/jquery.event.move.js"></script> <script src="js/jquery.twentytwenty.js"></script> <script> $(window).load(function(){ $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7}); $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'}); }); </script>
【JavaScript】ビフォー・アフター画像をわかりやすく比較するプラグインデモ|TwentyTwentyページ
【JavaScript】ビフォー・アフター画像をわかりやすく比較するプラグインデモ|TwentyTwenty
ソース元:TwentyTwenty
TwentyTwenty
TwentyTwenty -GitHub
※流用される場合は自己責任でお願いします。