Product Tour

JavaScript

レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

Product Tourはレスポンシブに対応したプロダクトツアーを実装することができます。CSSとjQueryを使ってWebサイト内でステップごとにガイドを表示させることが可能です。順番に効率良く説明したい時に役立ちますね。

Product Tour

サンプル

Start tourというボタンをクリックするとステップ1〜3までのガイドを順番に見ることができます。Previous、Nextで前後のステップに移動します。

PC版ではフェードアニメーションでふんわりとさりげなく各ステップの位置へ移り変わっていきます。一方、モバイル版ではスライドで切り替わるようになっており、iPhoneで確認してみたところフリックでスライドすることもできました。

デザインも全体的にシンプルにまとまっていて非常に見やすいですね。

というわけで、レスポンシブなプロダクトツアーを実装したい方は是非チェックしてみてください。

Product Tour

関連記事

  1. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  2. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  3. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  4. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

  5. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  6. Jquery modal box plugin

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP