神奈川美研工業株式会社

制作概要

神奈川美研工業株式会社様のコーポレートサイトリニューアルのコーディングを担当しました。
※会社概要ページ以外の実装を行いました。
※公開前のため複製したデータになります。

アニメーション

トップページファーストビューのアニメーションはpngアニメーションとCSSを組み合わせて実装しました。
サービスの4つの部門の特徴を織り交ぜて表現しています。

• 産業廃棄物部門
• 一般廃棄物部門
• 土木工事部門
• 解体工事部門

タイミング調整の管理

間隔やタイミングの調整がしやすいようvar()関数を使用し、フェーズを基準としてcalc()で足し引きすることで管理がしやすいようにしています。
animation: fadeIn 0.6s calc(var(--time_dev_show) + 0.4s) forwards;
検証を繰り返し、ゴールまで10秒以内に収めることができました。

素材の作成

デザイナーにフェーズごとのイラスト、アニメーションの差分を用意していただき、グループ・レイヤー分けなどは表示順序などを考慮しながら自身で行いました。
pngアニメーションは圧縮した上で生成し、少しでも読み込みに負荷をかけないよう配慮しています。

備考

アニメーションのスキップ機能や、初回訪問時のみアニメーション発火なども提案しましたが、
工数の関係もありロード毎にアニメーションが走る形となりました。