Product Tour

JavaScript

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

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

Product Tour

サンプル

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

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

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

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

Product Tour

suitabs横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」前のページ

Bywordでワード数と文字数のカウンター表示・非表示を切り替えるショートカットキー次のページBywordでワード数と文字数の表示・非表示

関連記事

  1. no-image
  2. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  3. Jquery modal box plugin
  4. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  5. Water Wave Effect jQuery
  6. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP