テキストを1文字づつアニメーションで表示させるjQueryプラグイン「jquery.textAnimation」

  • このエントリーをはてなブックマークに追加

テキストに1文字づつCSSでアニメーションをつけたら面白い動きになるんじゃないかなぁと思って作ってみました!値を設定できるようにしてみたら自分で予想してないような面白い動きも作れて楽しめました。
値によってはハリーポッターとか映画でよくあるような文字の出方みたいになったり!


DEMO + Edit(下エリアにその動きを再現するスクリプトが表示されます。)

仕様

  • テキストを1文字づつさまざまなエフェクトでアニメーション表示する

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.textAnimation.js"></script>
<script type="text/javascript">
	$('.text1').textAnimation();
</script>

オプション

初期設定

speed: 1000,
delay: 200,
left: 0,
top: 0,
scale: 1,
rotateY: 0,
rotateX: 0,
translateZ: 0,
letterSpacing: $content.css(' letterSpacing'),
easing: 'ease-out',
backgroundColor: 'transparent',
isRandomScale: false,
isRandomPosition: false,
isRandomRotateY: false,
isRandomRotateX: false,
isRandomTranslateZ: false,
isRandomSpeed: false,
isRandomDelay: false 
speed
CSSのスピード(ms)
delay
次の文字までの時間(ms)
left
leftの移動量(px)
top
topの移動量(px)
scale
transformのscale変化量
rotateY
transformのrotateY変化量
rotateX
transformのrotateX変化量
translateZ
transformのrotateZ変化量
letterSpacing
letter-spacing変化量
easing
transition-timing-functionで指定できるeasing,
backgroundColor
変化させたい背景色
isRandomScale
scaleをランダムの値にするか。(delayで指定した値までのランダム)
isRandomPosition
left,topをランダムの値にするか。(left,topで指定した値までのランダム マイナスの値も含む 200の場合 -200 ~ 200となる)
isRandomRotateY
rotateYをランダムの値にするか。(rotateYで指定した値までのランダム)
isRandomRotateX
rotateXをランダムの値にするか。(rotateXで指定した値までのランダム)
isRandomTranslateZ
rotateZをランダムの値にするか。(rotateZで指定した値までのランダム)
isRandomSpeed
speedをランダムの値にするか。(speedで指定した値までのランダム)
isRandomDelay
delayをランダムの値にするか。

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/103

このページの先頭へ戻る