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

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



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

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

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

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

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

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

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

 

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

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

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

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




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

recent post

ファーストビューに最適!画面ぴったりに表示する「100vh」の設定

Elementorで文字をくるっと丸く曲げる!テキストパスの活用法

スマホで崩れない!「アイコンボックス」でサービスの強みを綺麗にレイアウト

サイトがプロっぽくなる!「ホバーアニメーション」の作り方

Elementor 制作の見出しのHTMLタグ(H2・H3)の基本

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