スクロールの動きをカスタマイズ / カワズの唄

スポンサーサイト

            
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スクロールの動きをカスタマイズ

            
Category : WEBデザイン
~2013.8.3追記~
急に一部ブラウザで動かなくなりましたので、原因が解るまで当ブログでは、このスクリプトは使用中断します。




ところで、このブログをマウスでスクロールしてみて何か気づきませんか?
なんだかヌルヌルと気持ちよく動くでしょ?

それに良く見ればスクロールバーも違うでしょ。

今回はjQuery.nicescrollを利用して、ページスクロールの挙動スクロールバーをカスタマイズしてみます。
非常に簡単です。

まずは配布先のinuyaksa / jquery.nicescrollにアクセス。
真ん中より少し上の『ZIP』からダウンロードして下さい。

FC2で使う場合は、管理画面の『ファイルアップロード』でjQuery本体とプラグインをアップしておいてください。
このとき気をつけないといけない事がひとつ。
FC2では、ファイル名に『.』(ドット)を含んだものは使えないらしいんです。
なので事前にドット無しのファイル名にリネームしておいて下さい。
(もちろん拡張子のドットはあっても大丈夫ですよ。ていうか無いと駄目ですよ。)

ヘッダ内の記述はこんな感じ↓

<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script>
$(document).ready(
function() {
$("body").niceScroll({
cursorcolor:"#c00", // スクロールバーの色
cursorwidth:"10px", // スクロールバーの幅 
cursoropacitymax:"0.7", // スクロールバーのアクティブ時の透明度
cursoropacitymin:"0.4", // スクロールバーの非アクティブ時の透明度
cursorborderradius:"5px", // スクロールバーの角丸
});
});
</script>

デモサイトは、まさにあなたが今見ているこのページです。
上記のオプション指定で、ここと同じになります。

これ以外にもオプションが用意されてます。
こちらのサイトに詳しい解説がありますので、参考にして下さい。

実は僕も参考にしました。

めちゃ画期的なんですよ、このプラグインは。
だって今まで色んなjQueryを見てきましたけど、ソースに手を加えることなくスクロールバーをカスタマイズできるのは恐らく世界にコレだけですよ!(2012年現在)

簡単だし、使わな損ですよ!

いやマジで!
関連記事
スポンサーサイト

コメント

[コメント記入欄はこちら]

コメントの投稿

非公開コメント

FC2Ad

カークランド

Back to Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。