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] FlickerPlateを紹介します。

公開日: : 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

かっこいいプラグインで、フリックにも対応します。

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]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

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

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

記事を読む

[Dreamweaver] テンプレートの入れ子

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

[Dreamweaver] テンプレート機能を使う!初級〜中級編

まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)

まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹

記事を読む

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