[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd
Shepherdの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="shepherd-theme-arrows.css" /> </head> <body> ... <script src="shepherd.min.js"></script> </body> Step 2: HTML HTMLは普通に実装してOKです。 ガイドを表示する要素には、それが指定できるようclassを付与しておきます。 Step 3: JavaScript ガイドを表示するタイミングや内容はスクリプトで記述します。 基本書式は下記のようになり、classesに表示する場所、scrollToで自動スクロールの有無を指定します。 tour = new Shepherd.Tour defa
Webサイトにチュートリアル機能をプラスするjQueryプラグイン「Bootstro.js」
TOP > javascript , WebDesign > Webサイトにチュートリアル機能をプラスするjQueryプラグイン「Bootstro.js」 新しいゲームを始めたり初めてのWebサービスを利用する時、どんな操作をすれば良いのか最初にチュートリアルがあると、とても分かりやすいですよね。今回はWebサイトにそんなチュートリアル機能を付与するプラグイン「Bootstro.js」を紹介したいと思います。 実際にデモを動かしてみるとわかりますが、対象箇所のハイライト + 画面スクロールで、とてもわかりやすく説明を受けることができます。 ボタンやキーボードによる操作も可能で、次々と説明を流すことも可能。例えばWebサービスで使い方を説明したり、ゲームコンテンツのサイトにも使えるのではないでしょうか。 jQueryプラグインなので使い方もとても簡単。特定のクラスをチュートリアルした
複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch
ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale
Chardin.js
Chardin.js - Simple and beautiful overlay instructions for your apps.
Bootstrapでツアーコンテンツを実装する為のスクリプト・Bootstrap Tour Extended
BootstrapでWebサイトツアーコンテンツを実装する為のスクリプト、Bootstrap Tour Extendedのご紹介。閲覧中のページだけでなく、別ページへの移動も可能です。なかなか使い勝手はいい気がしましたので備忘録として。 Bootstrapでツアーコンテンツを実装するスクリプトです。 ツアーコンテンツをツールチップで実装します。 ↑ こんなん。 以下、公式の動作デモです。 Sample var tour = new Tour(); tour.addStep({ element: "#foo", placement: "bottom", title: "タイトルです", content: "文章です。 " + "文章の続き。 " + "<a href='http://example.com' target='_blank'>" + "リンクはこうやって貼る<\/a>" });
Webサイトツアーを可愛い吹き出しで実装するjQueryプラグイン・Crumble
注目させたい箇所に順々に吹き出し を表示させるWebサイトのツアー コンテンツを実装するjQueryのプ ラグイン・Crumbleのご紹介です。 可愛いデザインでこのままでも使え そうです。 ツアーコンテンツを実装するスクリプト。jQueryを使用します。 吹き出しをクリックすると次の吹き出しが表示されます。かわいい。 尚、吹き出しはgrumble.jsが使われていますので同時に読み込む必要があります。 <ol id="foo" style="display:none;"> <li data-target="span">吹き出し その1</li> <li data-target=".foo">吹き出し その2</li> <li data-target="b" data-angle="190" data-options="distance:10">吹き出し その3</li> </ol>表示さ
[JS]実装も簡単！ページ内の次にどこを見るかアニメーションでガイドするスクリプト -Pageguide
必要な時だけ、ページ内の指定したエレメントに番号付きのナビゲーションを設置するjQueryのプラグインを紹介します。 移動はアニメーションでスライドするので、気持ちいいです。 下部のパネルのアローをクリックすることで、次に見るべきコンテンツに移動します。 [ad#ad-2] Pageguideの使い方 実装は4ステップです。 Step 1: 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="stylesheets/pageguide.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="javascripts/pageguide.js"></scri
Webサイトツアーを手軽に実装出来るクロスブラウザ対応のjQueryプラグイン・Joyride
何度か似たようなの見かけてますが、 サイト内ツアーを実装出来るjQuery プラグイン・Joyrideです。高機能で はありませんが、シンプルでなかなか 使い勝手も悪く無さそうでしたので 少し触ってみました。 何度か似たようなの見かけてますので珍しくはないともいますけど・・・個人的にどこかで使いたいのでメモ的に。ライセンスはMITです。 ツールチップでナビゲーションが出ます。NEXTを押していけば勝手に進んでくれて、ツールチップのスタイルやコンテンツもマークアップで自由に作れるのが手軽でいいですね。 アニメーションのスピードやツールチップのデザイン、ボタンのテキストなども簡単に変更出来るようになっています。なかなか汎用的じゃないかなと。 いつも通りやっつけですけどサンプル用意しました。アクセスすればツアーが勝手にスタートします。 Sample コード<script type='text/j
サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」:phpspot開発日誌
サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」 2011年10月14日- jQuery Joyride Feature Tour Plugin - ZURB Playground - ZURB.com サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」 サイトを最初に訪れた人に、どういうふうに操作するかという部分をサイトをそのまま使って説明することができます。 使い方が超簡単で、<ol>リストにチュートリアルをリスト形式で列挙していき初期化します。 <li data-id="****">のdata-idの部分にポップアップを表示させたい要素のIDを指定します するとリストの順にポップアップがどんどん出て、「Next」ボタンを押せば次の要素にアニメーショ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
