[JS]ページの全体像を分かりやすくビジュアル化するスクリプト -jQuery.fracs

デモページ jQuery.fracsの実装 分けるエレメントの定義 エレメントはjQueryのセレクタを利用して定義できます。 var fracs = $( selector ).fracs(); 全体マップ 全体マップは空のcanvas要素を使用します。 <canvas id="outline" width="200" height="400"></canvas> 全体マップはJavaScriptで設定します。 $( "#outline" ).fracs( "outline", { crop: true, styles: [ { selector: 'header,footer,section,article', fillStyle: 'rgb(230,230,230)' }, { selector: 'h1', fillStyle: 'rgb(240,140,060)' } ] } )

[kussun]

長いページ内を移動しまくるような構成だと、自分が見てるのがどの位置なのか分かりにくくなるから、こういうナビゲーションがあると分かりやすくてイイね。

[nors]

http://larsjung.de/fracs/

[toaruR]

これすごいな。当然のようにIE8以下は無理だった

[Donca]

✔ [JS]ページの全体像を分かりやすくビジュアル化するスクリプト -jQuery.fracs