順番に特徴を説明するサイトツアーを印象的にできるJavaScript「Intro.js」

順番に特徴を説明するサイトツアーを印象的にできるJavaScript「Intro.js」サンプル 順番に特徴を説明するサイトツアーを印象的にできるJavaScript「Intro.js」 WEBサービスや商品特徴などを紹介するページでは、意図した順に閲覧してもらいたいことがあるかと思います。
Intro.jsを利用すると要素ごとに順番に見せられることが可能になります。
また周りが透過されますので、より集中して情報を見てもらうことができそうです。

使用方法 Intro.jsからファイル一式をダウンロードし、以下のように書きます。
<link href="introjs.css" rel="stylesheet" />
<!--[if lte IE 8]>
<link href="introjs-ie.css" rel="stylesheet" />
<!-- <![endif]-->
<script type="text/javascript" src="intro.js"></script>

あとは要素に以下のようにdata-stepとdata-introを記述するだけなので、簡単に既存サイトにも埋め込みが可能です。
<p data-step="1" data-intro="さあ始めましょう!SKIPを押して進みましょう"></p>
<p data-step="2" data-intro="ここは2番目ですよ"></p>
<!-- 以下要素分 -->

また、data-positionを使うと表示場所を調整できます。
data-positionはデフォルトが下に表示される「botttom」となっており、その他「top」「right」「left」があります。
なお、ステップを始めるボタンは以下のようにしてあげます。
<a href="javascript:void(0);" onclick="javascript:introJs().start();">ステップを見る</a>
順番に特徴を説明するサイトツアーを印象的にできるJavaScript「Intro.js」サンプル

sponsors

「順番に特徴を説明するサイトツアーを印象的にできるJavaScript「Intro.js」」をシェアする

記事作成:
記事URL:

TOP > > > 順番に特徴を説明するサイトツアーを印象的にできるJavaScript「Intro.js」