[jQuery] OSX風のスクロールバーにするプラグイン!
公開日:
:
jQuery, Web制作 javascript, jQuery
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
関連記事
-
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの