フェード文字

■サンプル



■タグ

<div style="background-color:背景色;color:文字色">非対応の場合の文字</div><script type="text/javascript"><!-- (function(){var C=['背景色','文字色'],H=['１コマ目の文字','２コマ目の文字','３コマ目の文字'],S=1000,F=500,a=document.getElementsByTagName('div'),e=a[a.length-1],l=e.style,c=[],f=0,s=0,p,t,x,i=0,j,z;for(;i<2;i++){c[i]=[];for(j=0;j<3;j++)c[i][j]=parseInt(C[i].substr(1+j*2,2),16)}function u(v){v=v<0?0:v>1?1:v;x=1<<24;for(i=0;i<3;i++)x|=c[0][i]+(c[1][i]-c[0][i])*v<<16-i*8;l.color="#"+x.toString(16).substr(1)}setInterval(z=function(){t=+new Date;if(!s){l.color=C[0];e.innerHTML=H[f]}if(s==1){u((t-p)/F);if(t-p<F)return}if(s==2&&t-p<S)return;if(s>2){u(1-(t-p)/F);if(t-p<F)return;f=(f+1)%H.length;s=-1}s++;p=t},50);z()})()//--></script>

■使用方法

コマ数に応じて、タグ中の「'○コマ目の文字',」を増減させてください。

背景色や文字色は、色コード(#ffffff)の形式で入力してください。

■注意事項

絵文字はフェード表示されない場合があります。

---

戻る