ちょっとしたJSでサイトにビフォーアフタースライダーが実装できる！？

サツキ: トリック or トリート！とりあえずお菓子ください。

皆さん、こんにちは。サツキです。

今回は、最近見かけることも多くなったビフォーアフタースライダーの実装方法について見ていこうと思います。
2枚の画像による新旧や時間の経過、なんらかの画像加工による変化などの違いをわかりやすく見せるために用いられることが多いかと思います。
自身のサイトに取り入れれば、ユーザー体験の向上を図る効果も期待できるかもしれません。
それでは実際に見ていきましょう。

V I – Before and After Image Comparison Slider using CSS Variables. SUPER simple.
※上記は今回参考にさせていただいた codepen.io のコードになります。

実装するビフォーアフタースライダー

センターにある操作バーを左右に動かすことで画像のビフォーアフターが確認できるかと思います。
ちなみにですが、操作バーをドラッグしなくても画像内をクリックするだけで操作自体は可能です。

それではこの後から実際のコードの説明を行っています。

HTML・CSS・Javascriptのコードについて

  例）SAMPLE HTML
  <div class="before_after_slider">
    <div class="box_before" id="js-boxBefore">
      <img src="/Images/column/santa_before.jpg" alt="ビフォー画像">
    </div>
    <div class="box_after">
      <img src="/Images/column/santa_after.jpg" alt="アフター画像">
    </div>
    <input type="range" min="0" max="100" value="50" oninput="beforeAfterSlider()" onchange="beforeAfterSlider()" class="slider_range" id="js-sliderRange">
  </div>

上記がビフォーアフタースライダーで使用しているHTMLのコードになります。
ポイントとしては、<input type="range">タグに[oninput][onchange]イベントを設定し、この後で紹介するJavascriptの関数を実行していることです。
<input type="range">タグを操作した際に[oninput][onchange]イベントが実行され、変化した[value]の値をビフォー画像を囲っている<div class="box_before" id="js-boxBefore">タグの[width]に設定することで要素の幅を変え、その後ろに配置した画像を見せるという仕組みになっています。

※ 注意点１：上のHTMLで設定する２枚の画像については縦横のサイズが同じものを設定するようにしてください。
※ 注意点２：IEブラウザは対応外となります。

  例）SAMPLE CSS
  <style>
    .before_after_slider {
      position: relative;
      overflow: hidden;
      width: 800px;
      max-width: 100%;
      margin: 0 auto;
    }

    .box_before {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50%;
      height: 100%;
      border-right: 5px solid rgba(255, 255, 255, 0.7);
      box-shadow: 10px 0 15px -13px #000;
    }

    .box_before img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
    }

    .box_before::before {
      content: '';
      z-index: 1;
      position: absolute;
      top: 0;
      right: -30px;
      bottom: 0;
      width: 45px;
      height: 45px;
      margin: auto;
      border: 5px solid rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      box-shadow: 10px 0 15px -13px #000;
    }

    .slider_range {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      opacity: 0;
      cursor: col-resize;
    }
  </style>

上記がビフォーアフタースライダーで使用しているCSSになります。
装飾はあまり施してはいないため、サイトに合わせてカラーや操作バーの装飾等を変更するとより良いかもしれません。
とてもシンプルなCSSになっているかと思いますので比較的変更等も行いやすいのではないかと思います。

  例）SAMPLE Javascript
  <script>
    function beforeAfterSlider() {
      document.getElementById("js-boxBefore").style.width = document.getElementById("js-sliderRange").value + "%";
    }
  </script>

最後に上記がビフォーアフタースライダーで使用しているJavascriptになります。
行っていることはとても単純で、<input type="range">タグの[value]の値を<div class="box_before" id="js-boxBefore">タグの[width]に設定しているだけとなります。

まとめ

どういった作り方で実装できるのか調べたところ思った以上に簡単に実装ができたので、気になった方はぜひ一度実際に作って確かめてください。
簡単に実装できて操作していて楽しいスライダーだと思いますので、ビフォーアフターで表示すると効果的にアピールできそうな場合には考慮しても良いのではないかと思います。

それでは今回も最後までお付き合いありがとうございました。

コラム