動きの大きな開始アニメーション

Fade Inはとてもベーシックな開始アニメーションですがそれ以外にもエレメンターでは何種類も使用できます。



 おすすめ開始アニメーション

筆者がよく使う開始アニメーションとして、

⚫︎Fade In Up
じわっとフェードしながら下から上がってくる

⚫︎Fade In Down
じわっとフェードしながら上から下がってくる

これらはFade Inと同じく汎用性が高いので、見出しや文章、画像など多くの場合に使用しても違和感ありません。

⚫︎Slide In Left
スライドしながらウィンドウの左から出てくる

⚫︎Slide In Right
スライドしながらウィンドウの右から出てくる

 

特に目立たせたい時にはスライドしてくるといいかもしれません。例えばセクションやカラムがこの動きをすると中の要素も一緒に動いてくるので大移動しているのが視覚的に分かりやすいです。

このように大きな動きと言ってもシンプルな動きの方が、使い勝手がいいです。

他にもに動く開始アニメーションもありますが、出番は少ないかと思います。賑やかなサイトや、あえて煩雑な印象にしたい時などに使うこともあります。

エレメンターの注意点として、あまりアニメーションを多用すると、ページの読み込みに時間がかかってしまうことがあります。開始アニメーションだけが問題というわけではありませんが、サイトパフォーマンスを落とすリスクになってしまうことは覚えておくとよいと思います。




次回:左右スライドするときに起こる問題と改善点

recent post

省スペース化!アコーディオンでFAQ(よくある質問)の見せ方

Googleマップの埋め込み方

ただの線じゃない!「区切り」のテクニック

【図形装飾】スペーサーで作るアクセント線・カラーブロック

わざわざカラムを分ける必要なし!テキストの「段組み(カラム分割)」機能

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901