saikoの日記帳

about

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

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

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

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

PSO2es リカウテリ

20連

愛と友情のツープラトン

PSO2esでは新緊急が始まったわけですけども。
最近は覇級が死ぬほど楽しいのでガチャ引きました。
引きました。

可愛いなあリカウテリちゃん。
倍率知らないけどダカバスの代わりになるなら入れておきます。
いやなるわけないんですけどね、ダカバスなんて唯一無二すぎるから。

今回の緊急で覇級ご褒美チップがアーディロウちゃんになるということで、やる気が出ています。
やっとデュオスとバイバイですよ、アビマになっとるわ。
また半年ぐらい?続くなら問題なくアーディロウもアビマにできそう。

明日から始まる緊急は常にリカウテリを構成に入れて戦います。
正直風以外に使えない、汎用性が皆無ですけどなんとかなりますよね。
風属性弱点でないとまるで火力が伸びないのが辛い。
でも期間限定効果のためにちゃんと入れてあげなきゃ…。

引いたのはミスだったのでは?

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

page-top