Chariot

JavaScript

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

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

Chariot

デモ

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

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

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

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

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

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

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

Chariot

関連記事

  1. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  2. JavaScript

    2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

    multiscroll.jsというおもしろいjQueryプラグインがあ…

  3. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

  4. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  5. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  6. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP