demo
以下の参考サイト見て、Youtubeのローディングデモを自分でもつくってみようと思った。自分でつくるといっても、ほとんど書き写しただけだが。下のデモでは影をつけたり、アニメーションのボタンをjsで操作する際にライブラリを使ったりしている。自分でやるときはできるだけシンプルにしたかったので、それらは省略している。
・参考
Creative Loading Effects
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が適用されている可能性もある。
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に割り当てられます。
その他、初めて知ったこと
独自の属性をhtmlに付加する
<button data-anim="la-anim-1">YouTube</button>
htmlの属性に
data-*="value"
を書くと、独自の意味を定義することができる。でも今回自分でやるときは必要なかったので、省略した。
・参考
http://dresscording.com/blog/html5/custom_data_attribute.html
リンクを非リンクにする
pointer-events:none;
before/afterで要素を重ねたら、リンクできないようにする工夫が必要とのこと。
pointer-eventsについてのメモ - console.lealog();