aboutを閉じる
このブログについて

今はPSO2とかアズールレーンとかをプレイしている人です。
内容は日記ですよ。

■メインでやってるゲーム
PSO2
アズールレーン

■PSO2
5鯖で開始し、現在は9鯖で遊んでる。
最近はSuがボロボロなのでポリタンランドをのびのびやってるぐらい。
メイン職はSu、今はHe。

■アズールレーン
10月上旬に開始。
のんびりプレイでのびのび育成中。
このまま暫くイベント来ないままでいてほしい。

ブログがアップデートしました

v1.1 ロード画面の実装

製作30分

単純ながら、ロード画面を作りました。
理由としては、

1.暇だったから
2.フォントが後読みなので色々気まずい

ってことからです。
特に後者が重要で、フォントが最後に読み込まれるのでデザインが、ね?
この辺はfont-face君の問題点ですよね。
jsでフォントが後から読み出されるようにできたりすんのかな。
そこまで考えるの面倒だからやんないけど。

実装方法

まあ方法もないんですけど、単純に

真っ白bgを付ける(こいつはfixed)
そこの中にロードラップ付ける
その中にくるくる回すやつを入れる

っていうのがCSS部分で

真っ白bgをフェードアウトさせる
(フェードはopacityのアニメーションで実装)

っていうのをjqueryでやりました。
実にありふれたやり方ですが、簡単で良さみが深いです。

今回、アニメーションの実装にあたってはvelocity.jsを使ってみました。
「animateと比較するとヌルヌル動く!」とか
「軽量でサクサク!アニメーションの動きも良い!」とか
なんか褒める記事が多かったので練習がてらの利用になります。

正直この程度だと違いがわかりませんね。
もっと重めのアニメーションだと変わってくるんでしょうけど。
一応軽量なやつが使われてるよ!ってことでひとつ。

何かしらバグはありそう

なにせ30分でサクッと作られたものなので、安定性は皆無です。
最初もなぜか検索フォームだけ表に出てきてましたし。
それでもPC/スマホ両方に対応できてるからオッケーでしょう。

このロード画面を作ってるときに面白いと思ったのは、このくるくるがborderな所ですね。
参考にしたサイトは、画像じゃなくてborder引っ張ってそれを回してたもので。
開いてる部分はborder-color: transparent # #で上だけ透明にしています。
いや面白いなあと思いつつ真似して作りました。
色が違うだけで他はほとんど同じでございます。

そんなわけで、ロード画面を実装しました。
そのうち「ロード完了!」みたいなやつが実装されるかもしれません。
ユーザビリティ考えたらそんなんいらんかもしれんけど。

それでは今日はここらでサヨウナラー

コメントを残す

page-top