[JS]Webアプリやページのツアーガイドを簡単に加えることができる軽量スクリプト -Shepherd

Webアプリやページにツアーガイドを簡単に加えることができる軽量スクリプトを紹介します。以前に紹介した時から、v.2に大きくバージョンアップされました。

既存ページに加えるのも簡単で、柔軟なカスタマイズにも対応しています。

サイトのキャプチャ

Shepherd
Shepherd -GitHub

Shepherdのデモ

デモでは実際にツアーガイドを操作できます。

デモページ

ページを表示するとすぐにツアーガイドが表示され、「Next」をクリックすると次に進みます。パネルはそのステップごとに、最適な位置に表示されます。

ツアーガイドは途中で終わることもでき、終了すると通常の画面が表示されます。

サイトのキャプチャ

ツアーガイドの終了時

Shepherdの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。ポップアップには、popper.jsが使用されています。

Step 2: HTML

HTMLは通常通りに実装してOKです。
ツアーガイドを表示する要素には、それが指定できるようclassを付与しておきます。

Step 3: JavaScript

ガイドの内容や表示する順番はスクリプトで記述します。

更に詳しい実装方法は、下記をご覧ください。

sponsors

top of page

©2018 coliss