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. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  2. Bootstrap Photo Gallery jQuery plugin
  3. jQuery UI Month Picker Plugin
  4. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  5. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  6. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

コメント

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

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

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP