Works

制作実績

CSSとcanvasを組み合わせたアニメーションサイト

使用スキル

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • php
  • Sass
  • WordPress
  • Photoshop
  • Illustrator
  • Animate
  • Atom

担当業務

  • ディレクション
  • コーディング
  • フロントエンド
  • バックエンド
  • デザイン

「月夜野の月」として有名な、群馬のみなかみ町(旧月夜野町)で営業をされている農機具店様であるため、満月を強調という要望を頂きましたので満月がオープニングとしてアニメーションさせています。

この満月とススキのアニメーションですがcanvasとCSS、Sassで制御しています。

ススキの風で揺れる一定のアニメーションはcanvasで、満月の一定の動きはCSS、ホタルのランダムな動きはSassで関数を組み制御しています。

  • ロゴデザイン

  • canvas+CSS&Sassアニメーション

    動きによってアニメーションを制御するプログラムを使い分けています。ススキの風で揺れる一定のアニメーションはcanvasで、満月の一定の動きはCSS、ホタルのランダムな動きはSassで関数を組み制御しています。

    こうすることにより、レスポンシブに対して自由にデバイスに対して調整してくれます。

  • ローディング画面

    トップページのみアニメーションが展開するのでローディング画面が読み込まれます