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

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

[jQuery] OSX風のスクロールバーにするプラグイン!

公開日: : jQuery, Web制作 ,


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] ベンダープレフィックスはどこまで必要か?

各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!

寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か

記事を読む

[javascript] Google Maps javascript API v3の使い方(基本編)

Google Maps javaScript API v3とは Google Maps API V

記事を読む

[jQuery] クリック時に波紋のような効果をつける

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[Dreamweaver] オプション領域を極める!テンプレート上級編

オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

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
PAGE TOP ↑

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