no-image

JavaScript

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

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

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

デモ

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

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

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

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

BeerSlider

Sal.jsVanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」前のページ

円形に飛び出すメニューを実装できる「ggExpandableOptions」次のページno-image

関連記事

  1. gridscrolling.js
  2. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  3. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  4. jQuery Pit-scheduler v2.0
  5. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  6. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP