JavaScript

指定した要素をパカパカと点滅させることができる「jquery.flicker」

とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要素をパカパカと点滅させることができる「jquery.flicker」です。何か間違った操作をした時に警告っぽい感じを出したい場合にいいかもしれないですね。普通のファイルで946 Bytes、minの方で771 Bytesということでめっちゃ軽量です。という訳で以下使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたjquery.flicker.js(またはjquery.flicker.min.js)を読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.flicker.js"></script>
<script type="text/javascript">
$(function(){
    $('#sample').click(function(){
        $('body').flicker({
            'reps': 5, 
            'pause': 200, 
            'delay': 800, 
            'color': '#e55'
        });
    });
});
</script>

上記はid名がsampleという要素をクリックするとbodyが点滅するようになります。

オプション

オプションは点滅の回数や色、間隔などを設定できます。

reps

点滅する回数です。

pause

点滅して色がついている時の時間の長さです。

delay

点滅する間隔です。

color

色を設定できます。

こんな感じで使い方やオプションもシンプルで使いやすいですね。ちょっとした注意を促す時なんかに使ってみたいプラグインかと思います。

以下からダウンロードできます。

関連記事

  1. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  2. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  3. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  4. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

  5. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  6. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP