[jQuery] OSX風のスクロールバーにするプラグイン!
公開日:
:
jQuery, Web制作 javascript, jQuery
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
trackpad-scroll-emulator
trackpad-scroll-emulatorは、jQueryのプラグインで、OSX風のスクロールバーにすることができます。
導入方法
まずは、いつものように必要ファイルの読み込みです。
<link rel="stylesheet" href="css/trackpad-scroll-emulator.css" /> <script src="js/jquery.js"></script> <script src="js/jquery.trackpad-scroll-emulator-1.0.min.js"></script>
そしてHTMLのマークアップですが、縦方向の時と横方向の時で若干違います。
といっても、クラスが違うだけです。
まずは、縦方向
<div class="tse-scrollable demo1"> <div class="tse-content"> My content </div> </div>
そして、横方向
<div class="tse-scrollable demo2 horizontal"> <div class="tse-content"> My content </div> </div>
こうなります。horizontalが増えました。
そして、実行文です。
<script> $(document).ready(function() { $('.demo1').TrackpadScrollEmulator(); }); </script>
これで完成です。
ダウンロードは下記から。
https://github.com/jnicol/trackpad-scroll-emulator
まとめ
ちょっとおしゃれにしたい時などには最適なプラグインです。
それほど難しくないので、是非導入してみてください。
ad
関連記事
-
[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)
まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え