時間がないEC事業者に教えたいサクッと簡単に比較できるスライダー実装方法【JS】
こんにちは。
株式会社レッドビジョン・クリエイティブチームの熊澤です。
私は現在、アルポカというブランドでウェブサイト、LP、広告クリエイティブなどを担当しているWebデザイナーです。
アルポカ
体の冷えに悩む女性へ温活サポート商品と、ためになる温活情報をお届けするブランドです。心も体もぽかぽかするサービスをお届けしています。
今回は「2枚の画像を比較できるスライダー実装」の簡単な方法をお届けします。
社内で「化粧品の商品を使用した比較画像に動きをつけて表現できないか。」という相談がありました。
LPなどでも画像を貼り付けるだけでなく、動きをつけて比較画像を見せることで表現の幅も広がるかもしれません。
jQueryプラグイン「twentytwenty.js」で簡単に実装でき、どれくらい変化しているのかがひと目で分かるのでLPなどでも使えそうですね。
↓こちらでデモ画像をご覧いただけます。
TwentyTwentyの設置方法
まずは下記の本家サイトから「twentytwenty.js」ファイル一式をダウンロードします！
・jQuery TwentyTwenty Plugin | Playground from ZURB
https://zurb.com/playground/twentytwenty
使用するファイル
まず、jQueryを使うには、jQuery本体も読み込まないといけないので、
jQueryを読み込む記述をhead内に記述します。
jQueryのファイルをダウンロードして使用することもできます。
→ http://jquery.com/
jQueryはCDNでも利用できます。
→ https://code.jquery.com/
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
「twentytwenty.js」をダウンロードしたら使うのは下記のjsとcssの3つのファイルです！
・jquery.twentytwenty.js
・jquery.event.move.js
・twentytwenty.css
head内に下記を追加してファイルを読み込みます。
<link href="twentytwenty.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>HTML
比較したい2枚の画像をbody内に記述します。
1枚目が左側(before.jpg)で2枚目が右側(after.jpg)となります！
<div id="notenote">
<img src="before.jpg">
<img src="after.jpg">
</div>JavaScript
任意の要素に対して「twentytwenty」をbody内に設定してあげます。
<script>
$("#notenote").twentytwenty();
</script>これで設置完了です！
簡単ですね^^
サンプルコード
全体のコードは下記の記述になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>twentytwenty.jsを使用してみよう</title>
<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>
</head>
<body>
<div id="notenote">
<img src="before.jpg">
<img src="after.jpg">
</div>
<script>
$("#notenote").twentytwenty();
</script>
</body>
</html>最初でも見せていますが、このように表示されます！
スライダーの外観はスタイルシートでカスタマイズが可能で、Sassの変数を修正するだけでスライダーやバーのデザイン、オーバーレイのデザインなどを簡単に変更できます。
おわり
今回は、jQueryプラグイン「TwentyTwenty」を使用した、
「2枚の画像を比較できるスライダー実装」の簡単な方法を紹介しました！
ドラッグで見た目が変えれるので、化粧品やサプリを使用した時の効果比較の様子を表現するときなどに使えるのではないでしょうか。
また、ドラッグで画像を切り替えれるので、動きもあり、縦に長くなることもないのでユーザーの興味を引きつつ、LPやサイトを長くすることも避けれます。
時間がないEC事業者の皆さんに少しでもこの記事が参考になれば幸いです！
この記事が気に入ったらサポートをしてみませんか？