画像を比較できるビフォーアフター画像スライダーTwentyTwenty

「ビフォーアフター画像スライダー」TwentyTwentyの魅力をご紹介します。このjQuery プラグインを使えば、一瞬で画像比較ができます。

デモ
変化を一目で！ビフォーアフター画像スライダーとは？
こんなシーンで大活躍！
実際に使ってみましょう！
参考リンク

デモ

変化を一目で！ビフォーアフター画像スライダーとは？

「ビフォーアフター画像スライダー」は、変化の過程や効果をビジュアルで簡単に比較できます。特に、リフォームやダイエット、美容効果のビフォーアフターを比較するのに最適です。クリックで簡単に画像をスライドさせたり、フェードさせたりすることで、その変化をリアルタイムで確認できます。

こんなシーンで大活躍！

リフォームやデザインの比較

リフォームやインテリアデザインのプロジェクトで、ビフォーアフター画像スライダーを使えば、部屋の変化が一目瞭然。どれほどの変化があったのかを視覚的に確認できるので、施行前と後の違いを鮮やかに見せることができます。

ダイエットやフィットネスの成果

ダイエットやトレーニングの成果を記録するのにもぴったり。ビフォーアフター画像をスライドさせることで、自分の努力の成果を実感しやすくなり、モチベーションもアップします！

スキンケアや美容の効果

スキンケアや美容の効果をビジュアルで確認したい方にも最適です。特に、エステやスキンケア商品の使用前後の比較が一目でわかるので、自分のケアの成果を確認するのに便利です。肌のトーンや質感の変化がリアルに感じられることで、自信を持てるようになるかもしれません。

旅行や観光の思い出

旅行や観光で撮影したビフォーアフター画像もこのスライダーで楽しめます。たとえば、同じ場所での季節ごとの風景や、観光名所の変化などを比較することで、その地域の魅力を新たに発見できます。過去の写真と現在の風景を並べて、時の流れを感じるのも楽しいですよ！

ビジネスのマーケティング

ビジネスシーンでも大いに役立つビフォーアフター画像スライダー。商品やサービスの効果を示すために、実績や改善点を視覚的にアピールするツールとして活用できます。例えば、広告やウェブサイトにおいて、商品のビフォーアフターを見せることで、消費者の信頼を得ることができます。

実際に使ってみましょう！

TwentyTwentyは、画像のビフォー・アフター比較を簡単に実装できるjQuery プラグインです。まずは、必要なファイルを準備しましょう。

HTMLに必要なリソースを追加

以下のコードをHTMLファイルに追加して、jQueryとTwentyTwentyのライブラリを読み込みます。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<link rel="stylesheet" href="css/twentytwenty.css">

画像スライダーのHTML

ビフォー・アフターのエフェクトを適用するためには、HTMLに比較する画像を配置する必要があります。以下のコードをHTMLファイルに追加します。

<div class='before-after'>
  <img src='img/before.jpg'>
  <img src='img/after.jpg'>
</div>

jQueryでプラグインを初期化

jQueryを使ってTwentyTwentyプラグインを初期化します。以下のコードをJavaScriptに追加します。

このスクリプトは、.before-afterクラスを持つ要素にTwentyTwentyプラグインを適用し、ビフォーとアフターのラベルを設定します。また、クリックでスライダーを移動できるオプションも有効にしています。

$(function(){
  $('.before-after').twentytwenty({
    before_label: 'ビフォー',
    after_label: 'アフター',
    click_to_move: true
  });
});

オプションのカスタマイズ

twentytwentyプラグインには、スライダーの動作や表示をカスタマイズするためのさまざまなオプションがあります。

プロパティ	デフォルト	説明
default_offset_pct	0.7	ビフォー画像をどれくらい表示させるか
orientation	'horizontal'	前後の画像の方向（'horizontal'または'vertical'）
before_label	'Before'	ビフォーラベルの設定
after_label	'After'	アフターラベルの設定
no_overlay	false	ラベルを表示するオーバーレイを表示するかどうか
move_slider_on_hover	false	マウスホバーした時にスライダーを動かすかどうか
move_with_handle_only	true	ターゲットをハンドル（.twentytwenty-handle）に設定
click_to_move	false	クリックした時に、スライダーをその場所に移動

これらのオプションを設定することで、スライダーの動作をより細かくカスタマイズすることができます。例えば、orientationをverticalに設定すれば、スライダーが垂直方向に動くようになります。

参考リンク

このスライダーの詳細や追加の設定については、公式のGitHubリポジトリを参照してください。様々なカスタマイズオプションや使い方が紹介されています。

以上で、HTMLとJavaScriptを使った画像スライダーの実装方法についての解説は終了です。ビジュアルコンテンツの比較が必要な場面で、ぜひこのスライダー機能を活用してみてください！

iwashitechブログ

Web系の情報を投稿していきます。