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

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

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

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

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

jQueryでよくあるNOWLOADINGを実装しようとした

所要時間2時間半

やりたいことの概要

今日はやることが全くなかったので、NOWLOADINGの実装を考えていました。
ゲームとかでよく見るアレ。
ああいうのの劣化版ですけども。

テスト用ページ

大体今のページにある下の動きですね。
劣化すぎだろって思うかもしれませんけど、こんなのに2時間かかりましたからねぼく。
動き続けるようにさせるので1時間ぐらいかかった気がする。
要は基礎がなってないって話ですよ。

さて、今回の概要としては

①NOWLOADINGの一文字一文字が独立してアニメーションで動く
②無限ループする

ってだけです。
もっと簡単だと思ったんですけどね。
一応コードとか載せます。

コード概要

こんなクソコードで動いてます。

See the Pen zzzjpN by saiko (@saikofall) on CodePen.

HTML側は、それぞれ一文字ずつspanで囲んでます。
最初は

NOW LOADING

で、それぞれを分割して配列に入れようとしてました。
よく考えると、それってHTMLからテキストコピーしてるだけですよね。
ぼくの頭が変になっていたので、普通に一文字ずつにしました。

CSSは特に特徴はなく、適当に位置調整してるだけです。

jsがメインですかね。
コメントとして残してありますけど、ググっただけなので理解はしてません。
面白いのが、forの中でsetTimeoutとかすると、iが全部固定されちゃうとかなんとか。
色々調べてみましたが、forだけぐるんと回りきってからsetTimeoutが起動しちゃうらしい?
だからsetTimeoutの中でconsole.log(i)とかやると最終値がずっと出続けるそうです。
その辺はスコープとかのお話になるのでよくわかりません。

今回やってるのは、

・for(i=1;i<11;i++)で全文字分回す ・指定の一文字をorderに入れる ・animateでその一文字(order)をアニメーションさせる ってのを繰り返してるだけです。 初めて知りましたが、jqueryでnth-of-typeを取得しようとすると普通じゃ数値取れないんですね。 おかげで調べる羽目になりました。 で、このコードを関数化してsetIntervalで繰り返させてます。 1500ミリ秒で繰り返してるってことですかね。 正直このsetIntervalに辿り着くのにめっちゃ時間かかりました。 forをforで回そうとすると一気に回りきるか無限ループするかだし。 そんなこんなで完成したのがリザルトにあるアレです。 そのうち書体とかちゃんとさせて背景色とかつけてこのブログに反映させるつもりです。 いやぁ今日は良い仕事をしたなあ。

参考サイト

jquery nth-child(数字) で変数を使用したい時
http://blog.livedoor.jp/kmiwa_project/archives/1011871691.html

一定時間で繰り返す(setInterval)
http://www.pori2.net/js/timer/1.html

【jQuery】ユーザ定義関数の使い方
http://www.ore-memo.com/1140.html

これらのサイト様にはお世話になりましたよ。
わかりやすいっす。
特に一番上のサイトがなきゃ取れなかったし。

またなんかあったらこんな感じの記事書きます。

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

コメントを残す

page-top