基礎知識：アニメーションの種類
動きがあるWebサイトを作る場合、一般的に以下の方法があります。
- 動画やGIF画像によるコンテンツ掲載
- CSSによるアニメーション実装
- JavaScriptによるアニメーション実装
- SVGによるアニメーション実装
本サービスではこれらの実装を一部制限することにより、開発期間の短縮に繋げています。アニメーション一覧ページで各実装例を確認することができます。
動画やGIF画像によるアニメーション実装
事前に動画やGIF画像のような動くコンテンツをご用意いただく実装方法です。
主な用途
- より複雑な動きが必要な場合
- 動く背景等が必要な場合
プランによる制限
事前にご用意いただく分には特に制限はありません。ただし、動画コンテンツの埋め込みチュートリアルをお読みください。
CSSアニメーションによる実装
CSSによるアニメーションを実装する方法です。
主な用途
- ボタンやバナー等のパーツ毎に一定の動きを繰り返したい場合
- シンプルな動きを繰り返す場合
- マウスホバーや入力フォーカス等のコンテンツに合わせたアニメーションが必要な場合
プランによる制限
アニメーション一覧ページをご覧ください。複雑なCSSアニメーションや複数のアニメーションを組み合わせたい場合はご相談ください。
JavaScriptによるアニメーション実装
JavaScriptを使うことにより、CSSより自由度の高いアニメーションを実装します。
主な用途
- 「文字が表示された後に跳ねる」のように条件付けしたアニメーションを実装したい場合
- 「スクロールに合わせてアニメーション」のように画面の状況変化に合わせて動かしたい場合
- 「1文字ずつ表示」のような細かい制御が必要な場合
プランによる制限
現在、JavaScriptによるアニメーションは一部を除いてプロプランでのみ受け付けております。
アニメーション一覧はこちらから。