not good but great

プログラミング、アート、映画・本の感想について書きます。

Youtubeのローディングアニメーションもどきを作ってみた

demo

以下の参考サイト見て、Youtubeローディングデモを自分でもつくってみようと思った。自分でつくるといっても、ほとんど書き写しただけだが。下のデモでは影をつけたり、アニメーションのボタンをjsで操作する際にライブラリを使ったりしている。自分でやるときはできるだけシンプルにしたかったので、それらは省略している。

・参考
Creative Loading Effects | Codrops
Creative Loading Effects



アニメーションの解説

画面外にまず定義

<div class="loading1"></div>
<div id="main">
	<div id="menu">
		<button id="btn1">Youtube</button>
	</div>
</div>
.loading1 {
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	width:100%;
	height:3px;
	background:#ed4e6e;
	-webkit-transform:translate3d(-100%,0,0);
	transform:translate3d(-100%,0,0);
	pointer-events:none;
}

translate3dを使って、画面の長さ分、左にずらす。

translate3dを使う理由は、モバイルでGPUを使ってなめらかなアニメーションを実現するため。下の記事を読むと、translateでもGPUが適用されている可能性もある。

Mobile Safariで2Dアニメーションを実行する時に、本当にtranslate3dを使用すべきなのか検証してみました | BALLOG

CSS3アニメーションを開始させるやり方

ボタンを押すとアニメーションを開始させることを考える。ボタンが押されたら、要素にCSSアニメーションを加えればよい。加えたままだと、ボタンを再度押してアニメーションを再開できないので、削除する必要がある。カウンターを設置して、押した回数を偶奇で判定して、CSSクラスの追加・削除を行うのは面倒と思っていたら、toggleClassがあった。

指定したCSSクラスが要素に無ければ追加し、あれば削除する。

便利なのでtoggleClassを採用。

・参考
toggleClass(class) - jQuery 日本語リファレンス

$("#btn1").click(function(){
	$(".loading1").toggleClass("la-animate");

	//アニメーション終了後実行	
	setTimeout(function(){
		$(".loading1").toggleClass("la-animate");
	},6000);
});

画面内に移動し、透明度を変化させる

.loading1.la-animate{
	z-index:100;
	opacity:0;
	-webkit-transition:-webkit-transform 5s ease-in,opacity 1s 5s;
	transition:transform 5s ease-in,opacity 1s 5s;
	-webkit-transform:translate3d(0%,0,0);
	transform:translate3d(0%,0,0);
}

ボタンが押されると、上記のcssが適用される。

opacityの右の2つの時間については以下の記事を読めばわかる。この場合、5s待って、1sで変化するということだ。

時間として指定される最初の値はtransition-durationに割り当てられ、 時間として指定される二番目の値はtransition-delayに割り当てられます。

transition-CSS3リファレンス

その他、初めて知ったこと

独自の属性をhtmlに付加する

<button data-anim="la-anim-1">YouTube</button>

htmlの属性に

data-*="value"

を書くと、独自の意味を定義することができる。でも今回自分でやるときは必要なかったので、省略した。

・参考
HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 | Dress Cording

リンクを非リンクにする

pointer-events:none;

before/afterで要素を重ねたら、リンクできないようにする工夫が必要とのこと。
pointer-eventsについてのメモ - console.lealog();