no-image

JavaScript

アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

BeerSliderはVanilla JSによるアクセシブルなビフォーアフター画像を実装できます。2枚の画像を比較する時にはとても便利な機能です。中央のボタンをスライドさせることで簡単に比較できるほか、キーボードにも対応しています。

2枚の画像を効率よく比較

デモ

画像の中央には左右の矢印が付いたボタンが設置されていて、ここを左右にスライドさせることで同じ領域内で2枚の画像を比較できるようになっています。ビフォーアフター画像を効率よく快適な操作でユーザーに比較させたい場合に最適な機能ですね。

また、キーボードの左右矢印キーからでもスライドさせることが可能です。

使い方やマークアップもシンプルで分かりやすく簡単に実装できるかと思います。

デモはレスポンシブにも対応しているのでスマホやタブレットなどモバイルからでも操作しやすいのがグッドです。

BeerSlider

関連記事

  1. NO IMAGE

    JavaScript

    レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」

    offbeatSliderはレスポンシブに対応したアニメーション付きの…

  2. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  3. jQuery Quick Modal
  4. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  5. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

  6. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP