
だいぶ今更感もありますが、今やWEBサービスのユーザーへの操作説明には欠かせない良くあるチュートリアル系のjQueryプラグインです。
その中でもintro.jsはおすすめです。
こういう部分は是非プラグインを使わせてもらって楽しちゃいましょう。
それではintro.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。
CSSコード
JavaScriptコード
チェックポイント
サンプルのHTMLのコードで見て頂きたい部分は「data-step」と「data-intro」です。
「data-step」に数値を1から順番に指定すればその順番通りにチュートリアルが進みます。
「data-intro」には説明したい内容を入れれば良いわけです。
チュートリアルスタートはintroJs().start()で動きます。好きなアクションで動かせしましょう。
属性やオプションを使ってtooltipの位置やデザインもCSSで直接変更など出来ますので、詳しくはintro.jsのGihHubページのUsageをご確認ください。
プラグインへ一言
こんなに簡単に実装出来るとは…ありがたい!
このプラグインにビビっときたらシェア
-
-
関連プラグインのデモも見る