saikoの日記帳

about

またLoading画面を新調した

5時間

概要

前のNOWLOADINGは色々とガタガタなので変更することを決めました。
まあ決めてから大分経ったんですけども。
一応完成(?)はしたのでとりあえず適用。

当初の予定ではメインビジュアル的なのを用意して、下スクロールボタンで移動ってのでした。
ただのブログでそれやっても煩わしさが出るだけだろってことでお流れに。
ひとまずはロード画面的なのを新調するだけに至ります。

色味とかは他のページを真似してるだけで、メインは中心のなんか動いてるやつです。
動きにJSは使用しておらず、基本的にはCSSで実装しています。
fadeoutは流石にJSでやってますが。
そこまで難しいことはしていないはずなのですが、なぜか5時間かかりました。

codepen

codeは大体こんな感じ(SCSS)。

スクロールバーがめっちゃ動くのは仕様です

今回の超絶面倒ポイントは、左右の線の動きです。
使った時間のうち、4分の3ぐらいはそこに使っています。

何がメンドーって、CSSにおけるアニメーションは%で管理しているんですよね。
なので、

・初期値は少し斜めにdeg
・時計回りに45deg回転
・反時計回りに6degまで回転
・一旦停止
・右の棒が時計回りに回転しきったらまた動き始める

っていう動作をするのがわけわかめでした。
アニメーションの部分は

@keyframes load_animation {
0% {transform: rotate(45deg);}
50% {transform: rotate(6deg);}
100% {transform: rotate(6deg);}
}
@keyframes load_animation_second {
0% {transform: rotate(3deg);}
33% {transform: rotate(3deg);}
66% {transform: rotate(-3deg);}
100% {transform: rotate(-3deg);}
}
@keyframes load_animation_third {
0% {transform: rotate(-6deg);}
50% {transform: rotate(-6deg);}
100% {transform: rotate(-45deg);}
}

となっていて、自分でもよく理解していません!!!
なんかこの感じでちゃんと動いてるからオッケー!!

要は半分の時間を停止させて、もう半分で動くようにしてるってだけです。
それを左の棒(first)と右の棒(third)に逆のアニメーションを当てています。
逆側が動いている間は動かないようにということですね。

で、真ん中を微妙に動かしているのは、そうしたほうがそれっぽかったからです。
なんとなくやりたい動きは理解してもらえると思うんですが、多分これでいいんじゃないかなあ…?
明らかに動きが物理的じゃないとか言わんでください、そんなん知らんです。

左右の棒の振れがなんか直線的すぎて気持ち悪いですが、完成。
結構時間もかけたし問題ないですよ、多分。

問題点

当然、問題点はあるわけですけどもね?
例えばスマホで見た時とかおかしなことになってるんじゃないですかね。
これ、大きな四角いdivで囲んだ中で動かしているので、スマホだと見切れる可能性が。
その辺は一切確認していないので、どんな風になっているかは知りません。
スマホ用に全体を小さくしていけばいいだけの話なんですけどね。

デザイン云々はともかくとして、今までで一番マシに完成したと思います。
色とか形とか、そういうのはぼくの仕事じゃないので知らないことです。
こだわりすらもないのでかなりテキトーです。
ですけども、それなりに形にはなったんじゃないでしょうか。

次はまたなんか考えて実装します。
そろそろメイン記事周りとか改装してもよさそう。
ていうかそんなことよりTwitterボタンとか付けたい。

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

page-top