Textillate.js

JavaScript

テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillate.js」

指定したテキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillate.js」を使ってみました。とても興味深い動きをするので見ていて楽しいですね。エフェクトの種類やループ、Delayなどオプションも色々あるので自分好みのエフェクトにカスタマイズできそうです。

[ads_center]

使い方

基本的にはダウンロードしたプラグインの中から、Textillate.jsの他にも、jquery.lettering.jsとanimate.cssを読み込む必要があります。

<link href="animate.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

あとはアニメーションを加えたい要素をセットするだけです。

<script>
$(function () {
    $('.sample').textillate();
})
</script>

以下はHTML。

<p class="sample">ここはサンプルです</p>

オプションを指定する場合は以下のように記述します。

<script>
$(function () {
    $('.sample').textillate({
        loop: false, // ループ
        minDisplayTime: 1000,
        initialDelay: 0,
        autoStart: true, // 自動スタート
        in: { 
            effect: 'rollIn',
            delayScale: 1.5,
            delay: 100,
            sync: false, // 動作の同期
            shuffle: true // シャッフル
        },
        out: {
            effect: 'hinge',
            delayScale: 1.5,
            delay: 100,
            sync: false,
            shuffle: false,
        }
    });
})
</script>

他にも色々とオプションがあるので詳しくは公式サイトをご確認ください。テキストに注目を集めたい場合なんかに有効ですね。

ということで、以上、Textillate.jsの使い方でした。以下からダウンロードできます。

関連記事

  1. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  2. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  3. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  4. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  5. jQuery plugin Watermark
  6. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

コメント

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

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

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP