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. Bootstrap Carousel Touch Slider with Text Animation
  2. jquery countDownTimer
  3. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  5. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  6. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP