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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

 


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

recent post

画像を好きな形に切り抜く「マスク機能」の使い方

謎のすき間の正体は?ウィジェットスペースとカラムギャップ設定の使い分け

「背景オーバーレイ」で画像上の文字の可読性を上げる方法

画像が重なる・ボタンが押せない!を解決する z-index(z-インデックス)

ただの箇条書きを卒業!「アイコンリスト」ウィジェット

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