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

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  2. jQuery Brazzers Carousel Plugin
  3. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  4. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  5. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  6. Grasp Mobile Progress Circle

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP