前回ご紹介した開始アニメーションですが、意識したい点や不具合が出にくいようにする注意点をまとめておきます。
注意点
⚫︎開始アニメーションが多すぎると読み込みに時間がかかってしまいます
まずはアニメーションを設定する数です。クオリティが上がるのでたくさんいろんな動きを取り入れてしまうと、読み込みが遅くなり、なかなかページが表示されないことになりかねません。またあまり動きすぎても見やすさが上がるわけではありません。肌間ですが、1セクションに1〜3開始アニメーション程度かと思います。
⚫︎アニメーションは同じ動きにすると統一感アップ
例えば、見出しや画像はFade Inで統一することでサイトの雰囲気や印象を崩さないまま、サイトのクオリティが上げることができます。左右で交互にSlide In RightとSlide In Leftとで画像が順番に出てくるというのも全く問題ありません。統一感の注意点というだけです。
⚫︎特に右から出てくるアニメーションは注意
Fade In RightやSlide In Right、他にもRubber Band、Tadaなど、横に動きがあるものはそのアニメーションの間だけウィンドウからはみ出してしまうことがあるので注意です。
左右スライドの問題点とその改善
ウィンドウからはみ出してしまうことになぜ注意が必要かという点ですが、左右の幅が増えると、ウィンドウの「横スクロールバー」が表示されます。この瞬間（アニメーションの継続時間）、何も表示されない領域へのスクロールが可能になってしまうのです。
⚫︎改善方法
1. 中の動かしたい小さな要素だけアニメーション
動くものが大きいとその分影響も大きくなります。
2. レスポンシブで変更
PCでは問題なくてもスマホの時には横スクロールバーが出てしまう時にはアニメーションの設定を分けるといいかもしれません。例えば、PCではFade In Rightのアニメーション、スマホの時にはFade In Upにする、などです。
3. 問答無用で非表示にする
セクションの設定でそのセクションからはみ出すことがあっても表示しないという設定が可能です。怪しい時にはこの設定にしておくと簡単です。
⚫︎オーバーフロー設定方法
セクションのレイアウト – オーバーフロー – デフォルトを→「非表示」に変更
これだけで、セクション内の要素が外に飛びて出ていたとしても問題ありません。
しかも、これは開始アニメーションに限ったことではなく、例えば文字を端から端まで目一杯大きくしてインパクトを出したい時や、中の要素のマージンにマイナスを入れて配置調整する時などにもこの設定は有効です。覚えておくと役立つ知識だと思います。
