Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」
GuideChimpはWebページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプトです 使い方も手軽で簡単、既存のWebページにも組み込む事が出来ます。nextはカーソルキーにも対応してありました 試しに使ってみました Example 用意されたサンプルをフォークしただけですが、それでも使い方はすぐに理解できるほどには使いやすい印象です サンプルではHTMLのカスタムデータ属性を利用してツアーを作成していますが、JSだけで管理する方法も用意されています JSで管理する際はツールチップ内にボタンも用意できるのでこちらの方が汎用的かもしれませんね ライセンスはApacheライセンスと有償ライセンスが用意されています GuideChimp
Driver
👨🔧️ Driver Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page With Animation Without Animation A lightweight (~4kb gzipped) yet powerful JavaScript engine that helps you drive the user's focus on page. Some sample use-cases can be creating powerful feature introductions, call-to-action components, focus shifters etc. What are the features? Driver is com
[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
[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
Firefoxで表示ページに、Photoshopのようなガイドを引いたり保存できるFirefoxのアドオン -foxGuide
Firefoxで表示してるページに、Photoshopのようなガイドを引いたり、そのページを閉じてもガイドを保存できるFirefoxのアドオンを紹介します。 下記はFirefoxで当サイトを表示し、foxGuideでガイドを引いたキャプチャです。 foxGuide [ad#ad-2] foxGuideのインストール foxGuideの対応バージョンはFirefox3.5+で、下記ページからインストールができます。 FoxGuide Add-ons for Firefox インストールが完了したら、ブラウザ枠の右下にfoxGuideのアイコンが表示されるので、クリックしてfoxGuideをオンにします。 [ad#ad-2] foxGuideの主な特徴 ガイドの保存と復元 表示ページでガイドを作成した後、ブラウザやタブを閉じてもガイドは保存されます。 作成したガイドを削除する際は、右クリックし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
