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. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  2. JQuery Portfolio
  3. jQuery Section Navi Plugin
  4. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  5. Effect Ideas for Card Stacks
  6. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP