Art Text Light jQuery plugin

JavaScript

テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery plugin」

指定したテキストに光が移動するエフェクトを与えることができるjQueryプラグイン「Art Text Light jQuery plugin」を使ってみました。さりげないエフェクトがとてもお洒落ですね。ワンポイントとしてどこかで使いたくなってきます。ということで、以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインファイル「arttextlight.js」をhead内に読み込みます。

<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="arttextlight.js"></script>

エフェクトを加えたい要素を指定します。

<script type="text/javascript">
$(function() {
    $('#text').artTextLight();
});
</script>

とても簡単ですね。オプションを指定する場合は以下のように記述します。

<script type="text/javascript">
$(function() {
    $('#text').artTextLight({
        letterHighlighSpeed: 30,
        removeHighlighSpeed: 100,
        highlightInterval: 3000,
        css1: {'color': '#ccc', 'text-shadow': '1px 1px 3px #fff'},
        css2: {'color': '#333', 'text-shadow': 'none'}
    });
});
</script>

オプション

オプションでは、移動する光の速さや間隔、光の色などを指定することができます。

・letterHighlighSpeed
光が移動する速さを指定します。
・removeHighlighSpeed
移動する光の幅です。
・highlightInterval
左から右へ、繰り返し移動する光の時間の間隔です。

css1に関しては、光の色を設定できます。css2は、移動した後のテキストの色を設定します。

ということで、テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery plugin」の使い方についてでした。

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

Responsive Design Bookmarkletレスポンシブなデザインを瞬時に確認する為のブックマークレット「Responsive Design Bookmarklet」前のページ

Media Queriesの@mediaを使ってブラウザ幅やデバイス幅に応じたCSSを記述してみる次のページMedia Queriesの@media

関連記事

  1. Thumbelina

    JavaScript

    サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

  2. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  3. Circular Slider
  4. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  5. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  6. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

コメント

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

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

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP