[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
関連記事
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの
-
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア