「textillate.js」が豊富なエフェクトが用意されていて面白い

文字にエフェクトがあると読みずらい？そんな事どうでもいい、読ませる文字じゃねーんだから考えるな感じろ！そんな時に使います。

デモ

アニメーションさせたい文字列

※詳細は本家サイトで挙動確認
http://textillate.js.org/

ダウンロード

http://textillate.js.org/
https://github.com/jschr/textillate

使い方

HTML

<p class="textillateArea">文字列文字列文字列文字列文字列文字列文字列文字列文字列</p>

CSS

<link href="assets/animate.css" rel="stylesheet"/>

JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

パラメータを入れてー

<script>
  jQuery(function (e) {
    e(".textillateArea").textillate({
      loop: !0,
      minDisplayTime: 2000,
      initialDelay: 500,
      autoStart: true,
      in: {
        effect: "flipInX",
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false
      },
      out: {
        effect: "flipOutX",
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false
      }
    })
  });
</script>

改行挟みたい場合CSSで何とかします。

HTML

<p class="textillateArea">文字列文字列文字列文字列文字列文字列文字列文字列文字列<span class="br">改行改行</span></p>

CSS

<style>
.br:before {
  white-space: pre;
}
</style>