総合 | ||||||
---|---|---|---|---|---|---|
○× | 四択 | 連想 | 並べ替え | 文字パネル | スロット | タイピング |
506/550 | 684/817 | 627/743 | 730/864 | 280/355 | 319/394 | 719/930 |
エフェクト | キューブ | 順番当て | 線結び | 一問多答 | 早いもの勝ち | グループ分け |
411/461 | 336/396 | 292/492 | 188/346 | 246/342 | 36/49 | 123/237 |
正解率が軒並み悪かった先月より大幅に改善。先々月ー先月間で正解数純減したものもリカバリできてる。
あと特筆すべきはキューブの動きを変えたこと!
キューブで回転は実装してたけど「文字は一部しか見えない」をどう実装するか悩ましかったもので。(今回実装できたからキューブ冒頭の「苦し紛れに〜」の文言は削除)
以下、技術系ブログじゃないのでテキトーな説明
blinkタグが動かないということで代替を探してcssでopacityを0-1にすることに辿り着くまでが大変だった。
あとは元々文字回転に使ってるcssアニメーションの@keyframesの中にねじ込んで完了。
そのままだとアニメーションでゆっくり文字が出たり消えたりしちゃうので、こんな感じにして白黒一気に変わるように調整。
51%{ opacity:0;}
50%{ opacity:1;}
あと調整したのは明滅と回転のタイミングをずらすことで表示時がいつも同じ回転(たとえば0度〜90度しか出ない)にならないようにとか。これは画面見ながら値を変えていった感じ。
まあ検索して貼り付けて試行錯誤するだけの人なのでまともに勉強したことないし身についてないのが残念。
0 件のコメント:
コメントを投稿