Chariot

JavaScript

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

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

Chariot

デモ

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

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

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

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

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

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

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

Chariot

関連記事

  1. no-image
  2. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  3. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

  4. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  5. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  6. Responsive 3d Fold Scroll

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP