Chariot

JavaScript

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

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

Chariot

デモ

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

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

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

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

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

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

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

Chariot

関連記事

  1. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  2. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

  3. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  4. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  5. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  6. okzoom

    JavaScript

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

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

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP