作品タイトルは前回と同じ

伊丹の梅の木はどこに消えた?
Who moved our trees of plum in Itami?

コンセプト、ポイント

  • 前回のHTML5/CSS3課題作品の動きアニメのあるところをJavaScriptで作り直し
  • 画像スライド、プルダウン/アコーディオンメニュー、asideの入れ替え
  • 動きアニメ部分を計算式で動きを表す
  • おまけタイトル文字ロゴの和文をアウトラインからOTFを作成しWOFFに変換。
  • google mapをiframeからjavascript APIに変更
  • サンプルのみ画像スライダーをleftからtransformに変更したものも書いたが違いが不明

各対応内容

01.TOPロゴ背景の画像クリックスライド部分のJS化

styleのleft値を操作
左右ボタンでクリック
現在の表示位置インジケーターを追加
インジケーターでダイレクトジャンプ

02.サイドnavメニューのJS化

onmouseoverでstyleのheightを操作しプルダウンメニューオープン
マウス座標値でメニュークローズ

03.aside画面のJS化

styleのheightを操作しアコーディオンメニューオープン
iframeからinnerHTMLで書き換えに変更
10種類の内容をページ読み込み時にランダム選択表示

04.過去現在写真ギャラリー画面のJS化

JSで画像拡大表示
できれば中央から拡大

05.フレームワーク化

時間があったら対応
テンプレートに入れてfor等を使って生成

06.コンポーネント化パーツ化

時間があったら対応
JSファイルにコンテンツを外部化、innerHTMLで挿入

苦労した点、困った点

1.トップの画像スライドのイベントハンドラの引数の変数反映タイミング問題
2.メニューのCSSのhoverの動きとJSのmouseover、mouseoutの動きが違う問題。
イベントバブリングの違い。マウス座標検出でとりあえずは解決
3.aside関連行数はいったが実現できた。ランダム表示もできた。
4.過去と現在の写真画像ギャラリーのアニメが難しかった。
widthとheightを操作するとカクカク表示になる。そこでstyleのtransformを利用。
ぐぐると前者はCPU処理で、後者はGPU処理なので滑らかにアニメできるようです。
画像の拡大縮小はtransform=scale(x)で、中央から移動はtransform=translate(xpx,ypx)で。
IEでは実現できたが、最初に一瞬元サイズ画像が出てしまう。他のブラウザではエラーは
出ないがアニメが動かない。悩んだがどうやらscaleもtranslateもtransformの値なので
順番にするとscaleがtranslateで上書きされているせいらしい。結局translateを使わなくても
scaleだけで中央座標のまま拡大縮小されるので、translate関連のコードを全て捨てた。
しかしまだSafariだけ動かなかった。けどベンダープレフィックスをつけたら動いた
例:element.style.webkitTransform = sacale(x);これで全て解決。
5.比較画面のフェードインアウトは以前にopacity値の繰り返しで実現できたので
問題なく実現できた。

感想、まとめ

結局transformまで使ったんだったらCSSでやったらええやん。その方が簡単と思った。
アニメはなるべくCSSで、JSは条件分岐が必要だったりDOM要素を扱う部分と切り分けた方がよい。
全てのパーツの外部ファイル化、フレームワーク化はできなかった。
でもいろいろトラブル時の解決ネタがわかってよかった。
正規表現でidの数字をとってきて別のオブジェクトのidの名前に使ったり、変数に使ったり
するのは関数で使いまわしができて大変重宝した。