[jQuery] FlickerPlateを紹介します。
公開日：
:
jQuery, Web制作 HTML, 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
かっこいいプラグインで、フリックにも対応します。
Flickerplateは、シンプルでとても使いやすいjQueryプラグインです。
導入方法
まずは、jsやCSSの読み込みです。
<head> // Required javascript <script src="js/min/jquery-v1.10.2.min.js"></script> <script src="js/min/modernizr-custom-v2.7.1.min.js"></script> <script src="js/min/jquery-finger-v0.1.0.min.js"></script> // Flickerplate <script src="js/min/flickerplate.min.js"></script> <link href="css/flickerplate.css" rel="stylesheet" type="text/css"> </head>
今回は、タッチ検出にmodenizrとタッチイベントにjQuery-fingerを必要としてます。
続いてHTMLです。
<div class="flicker-example"> <ul> <li> <div class="flick-title">Title 1</div> <div class="flick-sub-text">Text line 1</div> </li> <li> <div class="flick-title">Title 2</div> <div class="flick-sub-text">Text line 2</div> </li> <li> <div class="flick-title">Title 3</div> <div class="flick-sub-text">Text line 3</div> </li> </ul> </div>
このように、今回はflicker-exampleを付けた中身が該当します。
最後に、実行文です。
<script>
$(document).ready(function()
{
$('.flicker-example').flicker();
});
</script>
これで完成です。
もっと詳しく知りたい方は下記を参考にしてみてください。
Flickerplate plugin
まとめ
かけ足で紹介しましたが、いかがでしたでしょうか？
シンプルなので、使い勝手は悪くないと思います。
気になった方は是非使ってみてください。
ad
関連記事
-
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない！
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
-
[Dreamweaver] テンプレート機能を使う！初級〜中級編
まだまだある便利機能！ 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[jQuery] フルサイズ（ブラウザいっぱい）で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[CSS] CSS3のtransitionを使ってみよう！
CSS3のTransitionは、そんなに難しくない！ CSS3では、CSSのマークアップだけでア
-
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ（切り抜き）するjQueryの
-
-
[HTML]デザインは、やはり大切だった！
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる！ 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ！[第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ！[第3回]
ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載？を再開しなきゃと思い、重
