釣りに行ったおかげで、心地良い疲れを感じている@CyberMameCANです。
“jQuery Lettering Animate” is an extension of the “lettering plugin”, it iterates through each letter separated by the lettering and animates it.
こちらのサイトを参考にFlashのように文字が表示されるようにしてみました。
JavaScriptをのsetTimeoutとtime:のパラメータ値をつかって、１行表示したら次の行、そしてまた次の行・・・と表示していきます。
このプログラムでは２回繰り返しています。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div class="box" id="example02"> <p id="title01">hello</p> <p id="title02">hola</p> <p id="title03">bon giorno</p> <p id="title04">guten tag</p> </div> <script src="js/jquery-1.6.1.min.js" type="text/javascript" language="JavaScript"></script> <script src="js/jquery.lettering.js" type="text/javascript" language="JavaScript"></script> <script src="js/jquery.lettering.animate.js" type="text/javascript" language="JavaScript"></script> <script> function Initiaraize() { $("#title02").hide(); $("#title03").hide(); $("#title04").hide(); $("#title05").hide(); } Initiaraize(); var repeat = 2; // 繰り返す回数 var level = -1; var lp = 0; function Parapara() { level++; switch( level ) { case 0: $("#title01").show().lettering().animateLetters({top:10,opacity:0},null,{randomOrder:false,time:1000,reset:true}); break; case 1: $("#title02").show().lettering().animateLetters({top:5,opacity:0},null,{randomOrder:false,time:1000,reset:true}); break; case 2: $("#title03").show().lettering().animateLetters({top:0,opacity:0},null,{randomOrder:false,time:1500,reset:true}); break; case 3: $("#title04").show().lettering().animateLetters({top:0,opacity:0},null,{randomOrder:false,time:2000,reset:true}); break; default: level = -1; if( ++lp < repeat ) { Initiaraize(); } break; } var timerId = setTimeout( Parapara, 3500 ); if ( lp >= repeat ) { clearTimeout( timerId ); } } Parapara(); </script> |
switch文の所の$(“#title01”)等が入っている行のパラメータを変えれば、文字の表示方法も変化します。
こういうブログもありました。
- Parallaxをやってみましたよ、jQueryを使って
- Nivo Sliderのスライドショー（jQueryプラグイン）
- ランダムに文字や画像をパラパラ表示する、jQueryで。
- Tumblrのリブログした画像をスライドショーの背景画像として設置 jQueryで
- jQueryテストスイート「QUnit」がスタンドアロン化!
人気のあるブログ：
- 新しいgemのアップデート方法（rubygems-update）
- Coda2でscssを使うときのお供にcompassをどうぞ。
- NginxをSSL付きで動かすために設定したこと
- SIM無しiPhone 3Gで初めて脱獄をやってみた
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
