POPSブログ

jQuery CSS3 transit.js使用のテキスト分割アニメーション

365

  Category:  jquery2015/08/26 pops 

jQueryプラグイン、jquery.transit.js、で簡単にCSS3 transitionの記述が出来ますのでテキスト分割アニメーションに応用、回転も簡単に出来て便利、通常のjQueryアニメーションより軽快に動作、HTMLで実行できるのがうれしい。

 

jQuery CSS3 transit.js使用のテキスト分割アニメーション テスト


jquery.transit.js、jQueryプラグインで簡単にCSS3 transitionの記述が、カスタムアニメーション animate() ライクに書けますので、回転させたり拡大させたりと便利です。通常のjQueryアニメーションより軽快に動作します。

以前はCSS3未対応のブラウザも多かったが、現在はセキュリティの観点から「モダンブラウザ」にほぼ移行して来ましたので、CSS3 transitionで処理してみます。

 

zu

 

ご注意、IE10以上のモダンブラウザでご覧ください(Chrome推奨)。IE9およびそれ以前のブラウザではご覧になれません。
但し、Android系の動作は不明です。


説明用テキスト分割アニメーション

これは、説明用の「分割アニメーション」で簡略化しています。(このページではjquery-1.6.4とjquery.transit.jsを使用)
文字の重なり順を変更した、テキストアニメーションのテスト 3 4 を追加しました。 2015/08/29


1. テキストアニメーションのテスト1 z-index変更無し
2. テキストアニメーションのテスト2 z-index変更無し DEMO2
3. テキストアニメーションのテスト3 z-index変更
4. テキストアニメーションのテスト4 z-index変更 DEMO4
5. 重要事項 テキスト文字の重なり、z-index / 虹色に染める


テキスト文字の重なり、z-indexを別の方法で処理します。このページのものより効率的、自由度が増します。
新たに「次のページ」に掲載しますので先に閲覧ください。2015/09/05

【新しい方法】当方の記事: jQuery CSS3 transit.js使用のテキスト分割アニメーション z-indexの操作


テキストアニメーションのテスト1

下の「ボタンを押してください」再度押しても同じアニメです。(但しランダム位置に分散)

 

[ テキスト描画エリア ]

 

● 右のボタンを押してください。テキストアニメーションを実行します。/ アニメ実行

説明上、文字収容の「P要素」の背景を着色しています。文字全体の横幅を取得出来るのが判ると思います。
「P要素」の高さはページのCSSの影響を受け易くなりますが、アニメなどには影響しません。

テキストの重なり順z-index変更サンプルは [ テキストアニメーションのテスト3 ]を参照ください。

 

 

HTML JS CSS

上の、「テキストアニメーションのテスト1」の HTML JS CSS です。



<div id="textchip-wrap">
<p id="anime-text" class="anime-block">[ テキスト描画エリア ]</p>
</div>

<p>右のボタンを押してください。<span id="hit-btn1" class="my-btn">アニメ実行</span></p>


//TEXT-ANIME/#hit-btn1用
(function($){

	$(function () {

		var tx_speed=1200;
		var tx_delay_time=200;
		var fontcolor="#20B2AA";
		var rainbow=true;
		var textlen;

		//TEXT
		//var mainstring="ViVa POPS WEB KOUBOU";
		var mainstring="テキストアニメーションのテスト";
		var textChip=[];

		//オブジェクト
		var anime_text=$("#anime-text");


		//クリックアクション
		$('#hit-btn1').click(function(){

			//テキストを作る
			create_text();
			//アニメする
			text_transition();

		});

		//クリエートテキスト
		function create_text(){

			textlen=mainstring.length;
			var text_html="";
			//spanで造成
			for (var i=0; i < textlen; i++) {

				var tx=mainstring.charAt(i);//1文字取り出す
				if(tx == ' ') {tx='&nbsp;'}//Firefox
				//HTML連結
				text_html=text_html + '<span id="'+ 'slice-text'+ i + '" class="slice_text">'+ tx +'</span>';
			}

			//apend
			anime_text.html(text_html);

			//オブジェクト保存
			for (var i=0; i < textlen; i++) {

				textChip[i]=$("#slice-text"+i);//オブジェクト保存

				//TEXT-COLOR
				if(rainbow){
					//虹色に染める
					var angle=i/textlen;//0-1
					var rgb=hslToRgb(angle,1,0.5);//RGB
					var color=getHexString(rgb[0],rgb[1],rgb[2])//#FFFFFF形式
					textChip[i].css({'color':color});
				}else{
					//指定色
					textChip[i].css({'color':fontcolor});
				}

				//陰影はtextShadow
				//textChip[i].css({textShadow:'0 0 5px #000000'});

			}

			//中央に移動する
			var w=640;
			var left_v=Math.floor(w/2-anime_text.width()/2);
			anime_text.css({'left':left_v});

		}

		function text_transition(){

			var p_v=1;
			var tx_pos_X=0;
			var tx_pos_Y=0;
			var tx_sliceflag=0;

			for (var i=0; i < textlen; i++) {

				//ランダム位置
				tx_pos_X=(Math.random()*500)-250;
				tx_pos_Y=(Math.random()*500)-250;

				//CSS移動時間がかかる
				textChip[i].css({translate:[tx_pos_X,tx_pos_Y],rotate:360,scale:[4,4],'opacity':0});

			}

			//遅延は重要
			setTimeout(function() {

				for (var i=0; i < textlen; i++) {

					indent=0;//-i*5
					textChip[i].delay(i*tx_delay_time).transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},tx_speed,"ease",function(){

						tx_sliceflag ++;
						//終了
						if(tx_sliceflag == textlen) {finsh_textAll();}

					});

				}

			},2000);
		}

		//finsh
		function finsh_textAll(){
			//何もしていない
		}

//------------------------------------------------
//HSL変換
function hslToRgb(h,s,l){

	var r,g,b;
	if(s == 0){
		r=g=b=l;//achromatic
	}else{

		function hue2rgb(p, q, t){
			if(t<0) t +=1;
			if(t>1) t -=1;
			if(t<1/6) return p+(q-p)*6*t;
			if(t<1/2) return q;
			if(t<2/3) return p+(q-p)*(2/3-t)*6;
			return p;
		}

		var q=l < 0.5 ? l *(1+s):l+s-l*s;
		var p=2*l-q;
		r=hue2rgb(p,q,h+1/3);
		g=hue2rgb(p,q,h);
		b=hue2rgb(p,q,h-1/3);
	}

	return [Math.round(r*255),Math.round(g*255),Math.round(b*255)];
}

//------------------------------------------------
//RGB数値を#000000形式に変換
function getHexString(r,g,b) {
	var color="#"+("0"+parseInt(r).toString(16)).slice(-2)+("0"+parseInt(g).toString(16)).slice(-2)+("0"+parseInt(b).toString(16)).slice(-2);
	return color;
}
//------------------------------------------------

	});

})(jQuery);


jQuery-2.x系、および次期jQuery-2.x系、の場合はspan要素 slice_textクラスに position:relative を記載ください。
z-indexの変更が可能です。(position:relative の記載なしは反応しません)


/*text-anime*/
#textchip-wrap{
display:block;
width:640px;
height:200px;
margin:0;
padding:0;
/*text-align:center;*/
border:#CCCCCC 1px solid;
}

#anime-text{
position:relative;
top:90px;left:150px;
z-index:1;
}
.anime-block{
position:relative;
display:inline-block;
width:auto;
height:auto;
margin:0;
padding:0;
line-height:100%;
background-color:#EEEEEE;
}
.slice_text{
display:inline-block;/*重要Firefox*/
font-size:32px;
font-weight:bold;
width:auto;
height:auto;
margin:0;
padding:0;
}

/*btn*/
.my-btn{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}


 

DEMO2


DEMO2、「テキストアニメーションのテスト2」、エフェクト数を増やしました。
z-index変更無し、JS、CSS はDEMO2ページに有ります。

DEMO-026


DEMO4


DEMO4、「テキストアニメーションのテスト4」、指定のFontをサイトにアップロードして使用する例。
z-index変更あり、エフェクト数を増やしました。JS、CSS はDEMO4ページに有ります。

DEMO-026b




 

簡単な説明


CSS3 transit.js使用のテキスト分割アニメーションの説明


基本的には「画像分割アニメーション」と同じになります。
問題はテキストを何の要素で構成するかが重要と思いますが、P要素の中に、一文字づつSPAN要素でラップして、P要素の中に入れることにしました。


1. 一文字づつSPAN要素でラップして、P要素の中に入れる
2. どちらもdisplay:inline-blockで設定する。(重要)
3. 一文字づつIDを付与してjquery.transit.jsで動かします。
4. P要素の位置はpositionで処理します。
5. アニメはCSS3 transition処理です。


HTMLでの文字表示はブラウザの機能により適正に配置されます。
下図の様に、FONTは横幅が微妙に違い、中の文字の配置もそれぞれ違います。W M 等はFONTのデザインによっては幅よりはみ出している場合も有ります。


zuzu

 

CSS3 transition処理のためjquery.transit.js が必要

transition処理には jquery.js の他に jquery.transit.js が必要です。
CSS3 transition処理ではSPAN要素の中央が回転の中心に自動で設定されるので、大変都合が良い。


transit.jsの配布元は下記サイトです。

【参照 DL】ricostacruz.com : jQuery Transit


// span要素を複数入れても文字の間隔は変わらない //

下の例の様にSPAN要素でラップして、複数並べても文字の間隔は変わりませんので、テキスト文字を分解処理し易い。


● 1つのテキストで表示の例

POPS WEB KOUBOU

● 分解してSPAN要素にいれて表示する例

POPS WEB KOUBOU


上記、2つのテキストは、文字の間隔はどちらも同じです。
htmlは下記の様になります。



<p>POPS WEB KOUBOU</p>

<p><span>POPS</span><span>&nbsp;</span><span>WEB</span><span>&nbsp;</span><span>KOUBOU</span></p>

実際のJSでの処理

テキストを1文字づつ分解、SPAN要素でラップして並べます。(他にも方法があるかも知れないが.....)


1. 一文字づつSPAN要素でラップして、P要素の中に html() で入れる
2. 半角スペースで区切ることが出来ます。
3. 横に1行で、改行などには対応していません。


SPAN要素でラップしていますので、文字のposition位置など考えることなく並べることが出来ますからこの点はうれしい。



textlen=mainstring.length;
var text_html="";
//spanで造成
for (var i=0; i < textlen; i++) {

	var tx=mainstring.charAt(i);//1文字取り出す
	if(tx == ' ') {tx='&nbsp;'}//Firefox
	//HTML連結
	text_html=text_html + '<span id="'+ 'slice-text'+ i + '" class="slice_text">'+ tx +'</span>';
}

//apend
anime_text.html(text_html);

スペースで区切る

文字の区切りには「半角スペース」を使用」出来ます。文字は表示しませんが1文字として扱われます。(透明人間状態です)

注意、Firefoxでは上記の様に、&nbsp; としないとスペースには成りません。厳格です。

zuzuzuzu

見えない「半角スペース」がウロチョロすることになります。邪魔な場合は「ハエたたき」で落としてください。


html()処理でP要素に入れればDOMに登録されます

html()処理でP要素に入れれば、先にP要素に存在するものはクリアされて、新たなHTMLとして挿入されます。
この時点でDOMに登録されますので、操作のためにオブジェクトとして配列で保存します。
以後、オブジェクト textChip[i] で有る「指定文字」を個別にアニメ処理出来ます。(ID、#slice-text0 #slice-text1 ......)



先にapendする
anime_text.html(text_html);

認識させたらオブジェクト保存する
textChip[i]=$("#slice-text"+i);//オブジェクト保存

分解された文字の原点 xy は中心で「0 0」に成ります

分解された文字のポジションは、「左上」ですが、回転の中心は別になります。


1. position は「左上」。
2. 回転の原点は自動的に中央で、translate:[0,0] つまり、 x:0 y:0 です。(上図参照)
3. ブラウザにより文字のY方向は誤差が出る場合があります。(さほど判らない)
4. 英字、日本語では多少配置が異なります。英小文字の中心は文字により見た目が異なる。(g i y qなど)


zuzuzu

 

CSS3 transition処理の場合、分解された文字の原点 xy は中心で「0 0」に成りますので注意が必要です。並び順にxyの値が違うわけでは有りません。(SPAN要素で並べているため文字が整然と見える)
つまり、規則有る位置(絶対位置と言うべきか)に移動させたい場合には「移動位置決め」の計算が面倒になります。
(各文字のpositionを取得するには、P要素をpositionで設定したほうが計算し易く間違いも少ないと思う)



全ての文字が

translate:[0,0]

全体を中央に移動する

中央に移動する場合、デモでは position で動かしています。text-align:centerで中央設定してもよいのですが、色々な処理をする場合にposition処理の方が都合が良いようです。

全文字の幅は、P要素の width() で取得できます。(P要素が inline-block であること)



//中央に移動する
var w=640;
var left_v=Math.floor(w/2-$("#anime-text").width()/2);
$("#anime-text").css({'left':left_v});

----------------------------------------------------------------------
//オブジェクト
var anime_text=$("#anime-text");

//中央に移動する
var w=640;
var left_v=Math.floor(w/2-anime_text.width()/2);
anime_text.css({'left':left_v});


text-align:centerで全体を中央に移動する

間違い易いのですが、P要素ではなく、P要素の親に text-align:center を設定します。
P要素の position leftは 0px です。
当然上の、CSSで中央に移動する anime_text.css({'left':計算値}) は実行しません。



CSS

#textchip-wrap{
text-align:center;
}
#anime-text{
position:relative;
top:90px;left:0px;
}

文字をCSSで移動して、アニメーション

分解した文字を何処かに移動して、元の値に transition() すれば良い訳です。
デモでは delay() で遅延させています。(jQueryのdelay())



//CSS
オブジェクト.css({translate:[値,値],rotate:値,scale:[値,値],'opacity':値});

//アニメーション
オブジェクト.transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},速度,イージング,コールバック);

● delayは「jQuery」「transit.js」どちらも使えますが、結果は同じです。


//jQuery
オブジェクト.delay(値).transition({translate:[0,0].....

//transit.js
オブジェクト.transition({delay:値,translate:[0,0].....

● delay値の算出

下記の delay値 は、左から 0 200 400 600..... ミリ秒毎に出現する計算に成ります。
その他の計算方法は「デモ2」のJSをみてください。


var tx_delay_time=200;

textChip[i].delay(i*tx_delay_time).transition({........

上下左右に移動

1文字それぞれが x y が 0 ですから、下記の様な場合は、全て同距離から元の位置に移動することになります。
文字の並びと同じでそれぞれがずれた位置になります。

上の説明図の「1番」参照



//右に500pxの距離
オブジェクト.css({translate:[500,0]});

//左に500pxの距離
オブジェクト.css({translate:[-500,0]});

//下に500pxの距離
オブジェクト.css({translate:[0,500]});

//上に500pxの距離
オブジェクト.css({translate:[0,-500]});

同一の位置に移動 (DEMO2参照)

1文字それぞれが x y が 0 ですから、下記の様な場合は、文字の位置を算出して補正しなければなりません。
positionで位置を決めた場合に、下記の様にそれぞれの位置を算出出来ますので、その値で位置を決めます。

DEMO2ページのJSが色々な位置から移動させていますので、それを参照ください。至って面倒になります。

上の説明図の「2番」参照



//P要素のoffsetを取得
var offset_base=anime_text.offset();

計算に必要な大きさ、文字位置を取得する (DEMO2参照)

各文字の位置取得は簡単ですが、P要素のoffsetで修正計算しなければならないから大変です。
個別文字の幅は小数点以下が取得できませんので、全横幅計算に誤差が出ます。
(移動先の誤差ですから問題は有りません、この辺は適当にしましょう)



//SPAN要素の保存配列
var offset_left=[];
var chip_W=[];
var allwidth;

//位置大きさ計算
for (var i=0; i < textlen; i++) {

	//offset
	var offset=textChip[i].offset();
	offset_left[i]=offset.left-offset_base.left;//中の距離

	//個別文字の幅
	chip_W[i]=textChip[i].width();
	//文字全体の幅
	allwidth=allwidth+chip_W[i]+2;
}
---------------------------------

//文字全体の幅はP要素の幅を取得しても良い
allwidth=anime_text.width();

jQueryで大きさ取得の際、現在では小数点以下は取得できませんが、デモの形式ではアニメには問題ないと思います。
次期のjQuery-3.0からは小数点以下も取得出来ます。


CSS移動時間がかかる

画像処理なら早いのですが、テキストは結構時間がかかるようです。
CSS3 transitionはレーヤー処理ですので、その処理描画に時間がかかるようです。(レーヤーは画像のようです)
下記の様に、遅延してから「アニメーション」を行います、文字数、ブラウザ、マシン環境でも違いがあると思いますが、
1-2秒くらい必要のようです。必ず確認ください。



//遅延は重要
setTimeout(function() {

	for (var i=0; i < textlen; i++) {

		//アニメーション実行

	}

},2000);

アニメーションの完了

複数文字を同時に処理していますので、「全てのアニメ完了」のタイミングがわかりません。
よって下記の様に tx_sliceflag で判定して「終了処理」にジャンプします。(変数は自由)



var tx_sliceflag=0;

//複数文字の処理
for (var i=0; i < textlen; i++) {

	indent=0;//-i*5
	textChip[i].delay(i*tx_delay_time).transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},tx_speed,"ease",function(){

		tx_sliceflag ++;
		//終了
		if(tx_sliceflag == textlen) {finsh_textAll();}

	});

}

マスク

CSS3 transition()処理ではレーヤーに描画されますので、ブラウザ画面全てにアニメーションを展開できます。
マスクの必要があれば、P要素の親に overflow:hidden を設定すれば、欄外に食み出た部分は描画されません。
このデモでは親DIV要素は #textchip-wrap に成りますので、以下の様にすれば良い。



#textchip-wrap{
overflow:hidden;
}

陰影はtextShadow

テキスト陰影は textShadow で付けることが可能ですが、若干アニメ動作が重くなるので、デモでは処理していません。
静止状態の場合は陰影処理しても構わないでしょう。(但しマシン環境にも拠るので好きにします)



//陰影はtextShadow
textChip[i].css({textShadow:'0 0 5px #000000'});

テキスト文字の重なり、z-index

エフェクトの状態により、テキスト文字の重なりを変えようと思っても変えられません。(変える方法があった....)
z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

問題が解決したので、後日、アニメ中でも重なり順が綺麗になるJSに訂正します。2015/08/27


jQuery-1.x系とjQuery-2.x系で違います

jQueryでのアニメーションではDIV要素を position:absolute で扱うことが多く、jQuery-2.x系も余り使用する機会が有りませんでした。SPAN要素のz-index変更は初めてでしたし...、運悪くjQuery-2.x系を使用していました。

jQuery-2.x系では明示的に position:relative をCSSに記載しないと、JSで z-index の変更が出来ない。


JS CSS は次の様に成る。


オブジェクト.css({'zIndex':値});//こちらが良い

オブジェクト.css({'z-index':値});//これでもOKですが

jQuery-1.x系であっても、position:relative 設定しておいても問題は生じませんから...


.slice_text{
position:relative;
display:inline-block;
font-size:32px;
font-weight:bold;
width:auto;
height:auto;
margin:0;
padding:0;
}

テキストアニメーションのテスト3

z-index変更のサンプルです。

下の「ボタンを押してください」再度押しても同じアニメです。(但しランダム位置に分散、ランダム表示順序)

 

[ テキスト描画エリア text-align:center 設定]

 

● 右のボタンを押してください。テキストアニメーションを実行します。/ アニメ実行

遅延(delay)で文字の出現を操作しているので、z-index の変更が難しいため、delay順に一括で z-index 変更。

 

HTML JS CSS

上の、「テキストアニメーションのテスト3」の HTML JS CSS です。基本的に前のサンプル(テスト1)と同じなのですが、同じページ記載のため少し変更しています。テスト1とID名競合するので #slice3-text...としている



<div id="textchip-wrap3">
<p id="anime-text3" class="anime-block3">[ テキスト描画エリア ]</p>
</div>
<p>右のボタンを押してください。/ <span id="hit-btn3" class="my-btn">アニメ実行</span></p>


//text-transition-sum3.js
//z-index変更

//TEXT-ANIME/#hit-btn3用
(function($){

	$(function () {

		var tx_speed=1200;
		var tx_delay_time=200;
		var fontcolor="#20B2AA";
		var rainbow=true;
		var inType=true;
		var indent=-5;
		var textlen;

		//TEXT
		var mainstring="ViVa POPS WEB KOUBOU";
		//var mainstring="テキストアニメーションのテスト";
		var textChip=[];

		//オブジェクト
		var anime_text=$("#anime-text3");

		//クリックアクション
		$('#hit-btn3').click(function(){

			//テキストを作る
			create_text();
			//アニメする
			text_transition();

		});

		//クリエートテキスト
		function create_text(){

			textlen=mainstring.length;
			var text_html="";
			//spanで造成
			for (var i=0; i < textlen; i++) {

				var tx=mainstring.charAt(i);//1文字取り出す
				if(tx == ' ') {tx='&nbsp;'}//Firefox
				//HTML連結
				text_html=text_html + '<span id="'+ 'slice3-text'+ i + '" class="slice_text">'+ tx +'</span>';
			}

			//apend
			anime_text.html(text_html);

			//オブジェクト保存
			for (var i=0; i < textlen; i++) {

				textChip[i]=$("#slice3-text"+i);//オブジェクト保存

				//TEXT-COLOR
				if(rainbow){
					//虹色に染める
					var angle=i/textlen;//0-1
					var rgb=hslToRgb(angle,1,0.5);//RGB
					var color=getHexString(rgb[0],rgb[1],rgb[2])//#FFFFFF形式
					textChip[i].css({'color':color});
				}else{
					//指定色
					textChip[i].css({'color':fontcolor});
				}

				//indentはマージンで設定/最初を除く
				if(indent){
					if(i > 0){textChip[i].css({'marginLeft':indent});}//0以上
				}

				//陰影はtextShadow
				textChip[i].css({textShadow:'0 0 5px #000000'});

			}

			//中央に移動するはCSSで行う
			var w=640;
			var left_v=Math.floor(w/2-anime_text.width()/2);
			//anime_text.css({'left':left_v});


		}

		//アニメ
		function text_transition(){

			var p_v=1;
			var tx_pos_X=0;
			var tx_pos_Y=0;
			var tx_sliceflag=0;
			var point_v=-1;//交互にマイナス値

			var tx_delay_st=[];
			//delay番号
			var delay_no=Math.floor(Math.random()*4);

			//flag未使用もあり
			var chgflag=Math.floor(Math.random()*5);
			var chgflag2=Math.floor(Math.random()*4);//4
			var posflag=Math.floor(Math.random()*3);//3

			var sh=textlen-1;
			for (var i=0; i < textlen; i++) {

				//ランダム位置
				tx_pos_X=(Math.random()*500)-250;
				tx_pos_Y=(Math.random()*500)-250;

				//CSS移動時間がかかる
				textChip[i].css({translate:[tx_pos_X,tx_pos_Y],rotate:360,scale:[4,4],'opacity':0});

				//delay
				tx_delay_st[i]=i*tx_delay_time;
				if (delay_no == 0) {tx_delay_st[i]=tx_delay_time*(sh-i);}//逆順
				if (delay_no == 1) {tx_delay_st[i]=Math.abs(i-sh/2)*tx_delay_time;}//中から
				if (delay_no == 2) {tx_delay_st[i]=Math.abs(Math.abs(i-sh/2)-textlen/2)*tx_delay_time;}//外から

				//遅延
				if(chgflag2 == 1){
					if(point_v > 0){tx_delay_st[i] +=1500;}
				}

				point_v *=-1;

			}


			//配列
			var number=[];
			for (var i=0; i < textlen; i++) {
				number[i]={'id':i,'delay':Math.floor(tx_delay_st[i])};
			}
			//配列をソート/delayの昇順にsort
			number.sort(function(a,b) {
				var x=a.delay;
				var y=b.delay;
				if(inType){return x > y ? 1 : -1;}//IN昇順
				if(!inType){return x < y ? 1 : -1;}//OUT降順
			});

			for (var i=0; i < textlen; i++) {
				var dno=number[i].id;
				//ラップ無し
				textChip[dno].css({'zIndex':i});
			}

			//遅延は重要
			setTimeout(function() {

				for (var i=0; i < textlen; i++) {

					textChip[i].delay(tx_delay_st[i]).transition({translate:[0,0],rotate:0,scale:[1,1],'opacity':1},tx_speed,"ease",function(){

						tx_sliceflag ++;
						//終了
						if(tx_sliceflag == textlen) {finsh_textAll();}

					});

				}

			},2000);
		}

		//finsh
		function finsh_textAll(){

			//重ね順を戻す
			for (var i=0; i < textlen; i++) {
				textChip[i].css({'zIndex':i});
				//textChip[i].css({'zIndex':textlen-i});
			}
		}

//------------------------------------------------
//HSL変換
function hslToRgb(h,s,l){

	var r,g,b;
	if(s == 0){
		r=g=b=l;//achromatic
	}else{

		function hue2rgb(p, q, t){
			if(t<0) t +=1;
			if(t>1) t -=1;
			if(t<1/6) return p+(q-p)*6*t;
			if(t<1/2) return q;
			if(t<2/3) return p+(q-p)*(2/3-t)*6;
			return p;
		}

		var q=l < 0.5 ? l *(1+s):l+s-l*s;
		var p=2*l-q;
		r=hue2rgb(p,q,h+1/3);
		g=hue2rgb(p,q,h);
		b=hue2rgb(p,q,h-1/3);
	}

	return [Math.round(r*255),Math.round(g*255),Math.round(b*255)];
}

//------------------------------------------------
//RGB数値を#000000形式に変換
function getHexString(r,g,b) {
	var color="#"+("0"+parseInt(r).toString(16)).slice(-2)+("0"+parseInt(g).toString(16)).slice(-2)+("0"+parseInt(b).toString(16)).slice(-2);
	return color;
}
//------------------------------------------------

	});

})(jQuery);



/*text-anime*/
#textchip-wrap3{
display:block;
width:640px;
height:200px;
margin:0;
padding:0;
text-align:center;
border:#CCCCCC 1px solid;
}

#anime-text3{
position:relative;
top:90px;left:0;
z-index:1;
}
.anime-block3{
position:relative;
display:inline-block;
width:auto;
height:auto;
margin:0;
padding:0;
line-height:100%;
}
.slice_text{
position:relative;
display:inline-block;/*重要Firefox*/
font-size:32px;
font-weight:bold;
width:auto;
height:auto;
margin:0;
padding:0;
}

/*btn*/
.my-btn3{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}


テキストアニメーションのz-index変更

画像分割アニメーションのz-index変更の手法を使いました。少し面倒ですが...、他に方法があるか判りません。


テキスト文字の重なり、z-indexを別の方法で処理します。このページのものより効率的、自由度が増します。
新たに「次のページ」に掲載しますので先に閲覧ください。2015/09/05

【新しい方法】当方の記事: jQuery CSS3 transit.js使用のテキスト分割アニメーション z-indexの操作


エフェクト数を増やしたサンプルはDEMO4ページに有ります。指定のFontをサイトにアップロードして使用する例ですが、別のFontを指定すれば、通常のJSとして使用できます。

DEMO [ テキストアニメーションのテスト4 ]

 

● delay順に一括で z-index の変更、これは外側からテキストを整列させますから、inType=true で、反対の動きは inType=false です。


//配列
var number=[];
for (var i=0; i < textlen; i++) {
	number[i]={'id':i,'delay':Math.floor(tx_delay_st[i])};
}
//配列をソート/delayの昇順にsort
number.sort(function(a,b) {
	var x=a.delay;
	var y=b.delay;
	if(inType){return x > y ? 1 : -1;}//IN昇順
	if(!inType){return x < y ? 1 : -1;}//OUT降順
});

for (var i=0; i < textlen; i++) {
	var dno=number[i].id;
	//ラップ無し
	textChip[dno].css({'zIndex':i});
}

● 重ね順を元に戻す
必要ならば、次の処理をします。


//finsh
function finsh_textAll(){

	//重ね順を戻す
	for (var i=0; i < textlen; i++) {
		textChip[i].css({'zIndex':i});
		//textChip[i].css({'zIndex':textlen-i});
	}
}

 

文字の間隔調整

文字の間隔調整で間隔をつめたい場合があります。(テキストindent)
但しアニメで重なり順が変わってしまうので、アニメ終了後に元に戻す操作が必要です。

zuzuzuzuzu

 

重なりの無い場合はアニメ終了後に元に戻す操作をシナクトモ「判りません」から不要です。


文字の間隔設定


通常は重なりは無い
var indent=0;
重なり5px、図と同じ
var indent=-5;
反対に広げる
var indent=5;

文字の間隔調整の実際
文字の間隔だけ、margin-leftで調整。この場合文字全体は text-align を利用したほうが配置の誤差が少ないようです。
text-align:center はP要素の親に設定すること。(left rightも可能です)
P要素全体の幅は width() で取得ください。
重なり、など判り易い様に遠泳、textShadow を付けています。


JS
if(indent){
if(i > 0){textChip[i].css({'marginLeft':indent});}//0以上
}

CSS
#textchip-wrap3{
text-align:center;
}

 

フォントの問題点

一番重要ですが、最後に書きます。
ご存知の通り、HTMLではフォントを指定しても、閲覧者のマシンに「指定フォント」が無ければ「別のフォント」が使用されます。つまりブラウザなどの条件により「書体」はばらばらで有り、且つ大きさも違ってきます。

「デモ」では特別にフォントを指定していませんので、ページのフォント指定に成ります。


1. 共通にありそうなフォントを指定する。
2. Google Fontを使用する。
3. 指定のFontをサイトにアップロードして使用する。(DEMO4参照)
4. そんなの関係ない。あくまでもシランフリを決め込む。


対処方法などは自由ですが、英字はともかく、日本語などはスコブル面倒です。WebFontを作るには下記参照ください。

【参照】当方の記事: CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する


 

虹色に染める

虹色取得には、下記、hslToRgb変換を利用しました。
HSL変換して、RGB値で返りますので、16進色にして利用しています。


http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c



//HSL変換
function hslToRgb(h,s,l){

	var r,g,b;
	if(s == 0){
		r=g=b=l;//achromatic
	}else{

		function hue2rgb(p, q, t){
			if(t<0) t +=1;
			if(t>1) t -=1;
			if(t<1/6) return p+(q-p)*6*t;
			if(t<1/2) return q;
			if(t<2/3) return p+(q-p)*(2/3-t)*6;
			return p;
		}

		var q=l < 0.5 ? l *(1+s):l+s-l*s;
		var p=2*l-q;
		r=hue2rgb(p,q,h+1/3);
		g=hue2rgb(p,q,h);
		b=hue2rgb(p,q,h-1/3);
	}

	return [Math.round(r*255),Math.round(g*255),Math.round(b*255)];
}



 

transit.jsに付いては下記ページの記事を参照ください。

【参照】当方の記事: jQuery transit.jsの使用方法を調べてみました


 

以上です。

 


[ この記事のURL ]


タグ:css3 , Transition , jquery

 

ブログ記事一覧



[1]