• かちびと.net

    ページ内に自動でビジュアル付きのスムーズスクロールを実装する軽量なjQueryプラグインSimple Elements Mapperのご紹介。ちょっと珍しかったのでメモ。ページ内のエレメントを可視化してスクロールに使用します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ページ内に自動でビジュアル付きのスムーズスクロールを実装する軽量なjQueryプラグインSimple Elements Mapper

スポンサーリンク

珍しかったので衝動でメモ。ページ内
に自動でビジュアル付きのスクロール
を実装してくれるjQueryプラグイン・
Simple Elements Mapperです。ビジュ
アル化したい要素や色なども選択可能
でスクリプト自体も軽量です。

たまに見かけるスクロールですね。指定した要素をビジュアル化することで概ね何があるかを把握してもらえます。またライブラリ自体も3kbと軽量でシンプルです。

Simple Elements Mapper


右側に見えているピンクの何かしらが、エレメントがビジュアル化されたページスクロールです。クリックでそのエレメントの場所にページ内スクロールする、というもの。

サンプル見たほうが早いですかね。

Sample(※デモページはShotokuを使用しています)

サンプルでは、リンクと画像をビジュアル化しています。

最初は、ドラッグで動かせるのかな、とか勝手に思ってしまいました。動かせたほうが素敵かなー、やっぱり。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>

まず本体の読み込み。

<div id="navi"></div>

で、上記のようにスクロール用のボックスをマークアップします。

<script src="jquery.pagemap.js"></script>
<script>
$("#navi").pageMap({
  base: "body",
  item: "a,img",
  cursorId: "map_cursor",
  viewId:   "map_view",
  itemColor:   "#fbb0b3",
  cursorColor: "#adadad",
  viewColor:   "#a7e6fa"
});
</script>

最後にスクリプトと設定項目を記述します。itemはビジュアル化するエレメントの指定です。セレクタでも勿論指定できます。ちゃんと動作させるには先程のマークアップより下部に配置する必要があるので置き場所はフッターあたりがいいんじゃないかなと。

#navi {
  position: fixed;
  left: 80%;
  top: 30px;
  width: 250px;
  height: 500px;
  cursor: pointer;
}

で、cssでビジュアル化したスクロールの配置とかを設定します。クロスブラウザで動作するんですが、IE6は position: fixed;に対応していません。

エレメントをリサイズして色を重ねるんですね・・プラグイン自体の使いどころは限られるかもしれませんがコードは結構参考になりました。

Simple Elements Mapper

※開発者さんへ・・余計なお世話だけど、サンプルには他のサイトを使ったほうがいい気がします。

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services