ホームページに動きをつけることで、インパクトを与えたり、サイトにストーリー性を持たせたりと、簡単に言うと「いい感じ」にすることができます。ここではエレメンターでのモーションのタイプを見ていきます。
⚫︎Scrolling Effects：画面のスクロールに合わせてエフェクト
⚫︎Mouse Effects：マウスの動きに合わせてエフェクト
⚫︎Sticky：表示画面で固定位置で表示する設定
⚫︎開始アニメーション：ページ表示に合わせてアニメーション開始
無料版でも使用可能な「開始アニメーション」
開始アニメーションのタイプは30種類以上ある中から選ぶことができます。
動きのほか、アニメーションの継続時間（ゆっくり / 普通 / 高速の3段階）で動きのスピード、アニメーション遅延(ms)ではアニメーションが発火するタイミングを調節できます。この(ms)の単位はミリ秒で、1000ミリ秒＝1秒なので、ページ表示から0.5秒後にアニメーションを開始する場合、このアニメーション遅延の数値は500とします。
あくまで「開始アニメーション」なので、一度アニメーションが終わればリロードしない限り動くことはありません。
セクションやカラムにも開始アニメーションは設定できます
ウィジェット以外にもセクションなどを動かすことも可能なので、ウィジェット一つ一つに設定するのではなく、大きな括りで開始アニメーションの設定が可能です。特にアンカーリンクをセクションで決める場合、表示時のアニメーションとしてを設定しておくことで、リンクしていきなり表示されたという印象を和らげることができます。
注意点として、セクション、カラムなど外側のアニメーション遅延の数値が大きいと、もし中の要素に遅延数値を早い値を入力していた場合、外側が表示された時にはすでに中の要素のアニメーションは終了している場合があります。発火のタイミングは画面上に開始アニメーションを設定したウィジェットが来た時なので、カウントは同時に始まっているということです。
レスポンシブでもそれぞれ対応可能
スマホ版、タブレット版でカラムやウィジェットを変えてサイズに適したレイアウトデザインに変更することも少なくありません。そんな時でもレスポンシブデザインに合わせて開始アニメーションをそれぞれに設定することが可能です。筆者は特に、Fade in Right など左右での動きをPCで設定した場合は、スマホの時にはFade in Upなど上下の動きに切り替えたり、なしにすることが多いです。
まとめ
アニメーションをつけるだけでサイトクオリティが格段に上がります。ただ、時間差をつけたりレスポンシブで切り替えたりと、こだわれるポイントが多いと同時に、注意点として、あまり動きすぎるとユーザーが閲覧しにくくなり、サイト自体が重くなり、なかなか表示されないなんてことも発生します。目立たせたいところや注目ポイントなどに絞ってアニメーションを付与するといいかもしれません。種類は豊富なのでまずは制作中のサイトに合う動きを見つけましょう。
