スクロールバーをカスタマイズ:jQuery
スクロールバーカスタマイズに関するアップデート記事
今日もいつもの用にWEBサイトのデザインをいろいろ見ていた。
その中で気になるサイトがあった。
それはさり気ない演出だが、サイト全体の雰囲気を保つためにとっても重要ではないかと思う。
http://www.felissimo.info/toys/
※音がでる
このサイトのページ下部にスクロールする部分がある。
そこのスクロールデザインがなんとも良い感じ。
アクセントカラーの赤色スクロールバーがサイトの雰囲気をうまく保っていると思う。
このスクロールバーはjQueryで設置されており、IEでも表示されている。
素晴らしい。
ということで今回はこのスクロールバーに関することを走り書きだが
メモっておこうと思う。
jQueryは[ jScrollPane ]を使用しているようだ。
■デモサイト
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
関連スクリプトとcss
demoStyles.css
jScrollPane.css
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
jquery.mousewheel.js
jScrollPane.js
上記のうちカスタマイズしたのは
jScrollPane.js
demoStyles.css
jScrollPane.js はスクロールの基本情報
demoStyles.css はデモページ内のスクロールのデザイン関連
■jScrollPane.js
640行目ぐらいにある [ dragMinHeight ]がスクロールバーの高さを調節できる。
※この他にスクロールスピードや、スクロールバーの横幅などを変更できる。
■demoStyles.css
jScrollPaneTrack スクロールバーのバックグラウンド
jScrollPaneDrag スクロールバーのスクロールする部分
上記デザインを変更する場合は、スクロールさせる大枠にオリジナルの
クラスもしくはIDを振り、そこから継承する
例:html)
<div class="holder original">
<div id="pane1" class="scroll-pane">
<p>コンテンツ内容文章掲載位置</p>
</div>
</div>
例:css)
スクロールバー
.original .jScrollPaneTrack {background: #ddd;}
スクロールする部分
.original .jScrollPaneDrag {background: #EDEDED url(type2.gif) no-repeat 0 4px; width:85px;}
originalの中に含まれる jScrollPaneTrack , jScrollPaneDrag に対してスタイルを適用する。
ざっくりだがこんな感じだ。
出来るだけ積極的に使用して、バリエーションと扱いどころをつかみたい。