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」の使い方についてでした。

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

関連記事

  1. JavaScript

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

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  2. cascadingDivs
  3. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  4. Choice.js
  5. Sticky Slider Navigation(Responsive)
  6. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP