GMOデジタルラボ新潟
WEBサイト制作のコーディング練習をしています。公式素材を拝借しているため、アクセス制限をさせていただいています。
GMOデジタルラボ新潟 Works画面
|
gmo_digilab (パスワード制限)
|
＜作品情報＞■サイト名：gmo_digilab
【URL】http://jewelry.jellybean.jp/wp08/limited/gmo_digilab/index.html
【担当作業】コーディング
【制作環境・ツール】Dreamweaver、SublimeText 3
【制作期間】2016年8月31日~9月3日
【詳細説明】
GMOデジタルラボ新潟サイトの画像コピーを使用し、HTML、CSS、JQueryで元のサイトと見た目、動作が同じようになるように制作しました。
ランディングページにあたる"Top"画面は鳥が舞う部分（レンダリング？）が技術的に難しいとわかり、"Top"ではなく、"Works"を一つクリックした画面の再現をしました。
元のサイトに利用されている有料フォントにイメージが近いフォントをGoogle Web Fontで等で探して使用しました。
フッターの走る車、x軸、y軸回転するCSS3アニメーション実装に力をいれました。
お問い合わせにある斜線はお手本ページと違う方法で表現しました。
認識している問題点と今後の課題
- ヘッダーのメニュー表示で詳細Slidedown表示後に戻らない、Slideup不具合の修正
- ページスクロール時にページ下部に現れるスクロールトップボタンの実装
- 背景の表示位置の修正（メニューがあるヘッダーをフロートさせる）
- マウス動作に反応してレイヤー毎に動くの背景の実装
- ページ最下部の車のアニメーションがIEでは動作していない問題の修正
- レスポンシブ化
- Top画面、Concept画面を含めたアニメーションの実装
