Chariot

JavaScript

Webページ内でステップごとのガイドツアーを実装できる「Chariot」

ChariotはWebページ内でのガイドツアーを実装することができるJavaScriptライブラリです。ステップごとのチュートリアルで、ユーザーにわかりやすくWebページ内でのガイドをしたいときにはピッタリのライブラリになるのではないでしょうか。

Chariot

デモ

デモページではスクロールアニメーションがついたものなどをはじめ、いくつかのデモが用意されています。

ボタンをクリックすると、ガイド用のポップアップ画面が表示されます。ポップアップ画面が表示中のときは、背景にオーバーレイがかかるのでポップアップ画面に集中させることができます。

Nextボタンをクリックすると、次のガイドポイントへ移動します。次のポイントへはスクロールアニメーションつきで移動されるので、そのポイントがどのあたりの位置にあるのかを把握しやすいのがいいですね。

全体的なデザインに関しても、余計な装飾がなくとてもシンプルで見やすいデザインに仕上がっています。ユーザーにステップごとのガイドをわかりやすく伝えたいときに活用できるJavaScriptライブラリです。

また、オプションにはposition、title、textなどが用意されており、ポップアップ画面を表示させる位置やタイトル、テキストなどを指定することができます。

使い方もわかりやすいので手軽に実装できるのがグッドです。

というわけで、Webページ内でステップごとのわかりやすいガイドツアーを実装したいという人は、ぜひ「Chariot」を試してみてはいかがでしょうか?

Chariot

miSlider複数の画像を表示したりスライドしたりできるスライダー「miSlider」前のページ

シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」次のページFlex-Slider-jQuery

関連記事

  1. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  2. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  3. LC Micro Slider
  4. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  5. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  6. Modaal

    JavaScript

    アクセシビリティに優れたモーダルウィンドウを実装できる「Modaal」

    ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP