リッチなアニメーションを指定して、オリジナリティ溢れるサイトにしたい時ってありますよね。
でもどんなアニメーションがあるか分からなかったり、なんとなくイメージはあるけど伝えるのが難しくて挫折してしまう方もいると思います。

そんな方向けにアニメーションのサンプルを定期的に紹介していきます！！

アニメーションの実装に関してお問い合わせいただく際にご活用ください。

今回はそもそもアニメーションにどんな種類があるか、
コーディングベースサイト内のアニメーションを参考にご説明いたします。

それぞれのアニメーションにどんなメリットがあるかもご紹介いたします。

ローディングアニメーション

トップページをローディングしている際に動くアニメーションです。

【メリット】
・動きで興味を惹きつけることができる。
・画像やWebフォントの読み込みが遅い場合に、一瞬表示崩れが発生するのを隠せる。

コーディングベースでは、タイピング風のアニメーションをつけています。

画面表示後に動くアニメーション

ローディング後や画面遷移後など、ページが表示された際に動くアニメーションです。

【メリット】
・インパクトを与えることができる。
・世界観をアピールできる。

コーディングベースでは、トップページのメインビジュアルをアニメーションで表現しています。
また、下層ページではページタイトルが表示されるアニメーションをつけています。

スクロールアニメーション

スクロールして、要素が見える際に動くアニメーションです。

【メリット】
・視線誘導ができる。
・動きがあると飽きさせない。

コーディングベースでは、テキストや画像など様々な箇所にスクロールアニメーションがついています。

弊社のコーディングでは、デザインがスクロールアニメーションに適している場合
シンプルなスクロールアニメーションを無料で実装いたします。（動きは弊社にお任せください）

ホバーアニメーション

ボタンなどリンクの上にカーソルを合わせた際に動くアニメーションです。

【メリット】
・リンクのクリックに繋がる。

コーディングベースでは、ボタンやテキストリンクなどについています。

弊社のコーディングでは、リンクにはホバーアニメーションを基本的にお付けいたします。
シンプルなホバーアニメーションは無料で実装いたします。（動きは弊社にお任せください）

ページ遷移アニメーション

別のページに遷移する際の、切り替わりアニメーションです。

【メリット】
・ページが変わったことを明示できる。
・画像やWebフォントの読み込みが遅い場合に、一瞬表示崩れが発生するのを隠せる。

コーディングベースではふわっと切り替わるアニメーションをつけています。

クリックで動くアニメーション

ハンバーガーメニュー、タブ、アコーディオンパネルなどクリックで動きが発生する要素は
クリックした際のアニメーションをつけることができます。

【メリット】
・クリックするとどうなるか伝えることができる。（開くを意味するデザインから閉じるを意味するデザインに変わるなど）

コーディングベースではハンバーガーメニュー、タブ、アコーディオンパネルにアニメーションがついています。