Forget　Forest　―忘却の森―

今日は勉強の日。
CSS3のトランジション（２つの関連動作をアニメーションさせる）をやった後、
HTML5とCSS3を採用したサイト作りを進めていく工程に取りかかりました。
トランジションの方は、マウスが乗ると大きさがゆっくり変わるとか、
クリックし続けると決まった大きさまで大きくなるとか、
テキストボックスが入力状態になると背景色が変わるとか、
ラジオボタンが横にスライドするとかいろいろやってきました。
とりあえずラジオボタンクリックすると横にスライドする意味がわからん（笑
つまるところ、この動作に対してこういう速度設定と時間設定で
アニメーションさせるよっていう指定なのですよね。
慣れるまではどれにかかってるのかごちゃごちゃになりそう。
サイト制作の方はまだ解説見ながら指定されたコードを書いていくだけなので
そこまで頭を悩ませたりはしていないですね。
今日もあっという間でした。

午後はずっとオリジナル部屋の改装作業をしていました。
さっそくメニューをアニメーションにするべくいろいろといじっていたのですが、
まず上にのびるっていう動作をさせる方法がなかなか見つからなくて、
そこからくじけそうになりました…。
結局上側に余白用のボックスを作って、
その下にリストを作成、リストのmargin-topをマイナス設定して上に寄せつつ
リストの高さを増やすことで何とかそれっぽくなりました。
ただ色分けや大きさ設定のためにid設定したらうまく動かなくなってしまって、
いろいろと設定が干渉しあわないようにするのにまた時間がかかってしまいました。
数時間かけてようやくメニューが完成しました…。大変だった。
できたメニューはこんな感じです↓

---

新しいサイトのメニューをCSSでのアニメーションにしてみた。 動画の最初は旧サイトのメニューで、画像をずらして動いてるように見せてる。 そのあと制作中のサイトのメニューで、画像を使わずに作った滑らかな動きのメニューになってます。 pic.twitter.com/7kqMZLcrLY

— 森晶風 (@morikaze_grass) 2015, 6月 25

---

ツイッターに上げた動画の埋め込みなので画質はかなり荒いです。
最初に今公開中の旧サイトで、メニューは下の方がフレーム外に隠れるようになってます。
マウスが乗った時に画像を上にずらすことで上にのびてるように見せてます。
そのあと製作中の新サイトで、画像を使わずCSS3でデコレーションしたメニューを
さっき書いた方法で上にのびるようにアニメーションしてます。
とりあえず大きな作業が終わったので、また各ページの作成作業に戻ろうと思います。