アニメーション効果

ここで言うアニメーション効果とは、ページ表示の際の画面切替でのアニメーション効果を言っています。画面切替の単位は、セクション、カラム、ウジェット毎で、同じようなアニメーション効果が利用できます。今回は、ウジェット単位でのアニメーション効果の事例を紹介します。

下記の画像の上の英字の見出しタイトルが、アニメーション効果の名称になっています。このサイトの別ページの「オンマウスで画像変形」では、画像にオンマウスする度に画像変形の仕様が見れましたが、今回は画像にオンマウスしても何も変化がありません。

再度、効果のほど確認したい場合は、ブラウザの「ページの再読み込み」機能で変化の内容が確認できます。それにしても豊富なアニメーション効果の種類に、ただただ驚いています。無料のElemntorでここまで出来るなって凄いとしか言えません。

主なアニメーション効果の名前と意味

fade in
zoom in
bounce in
slide in
rotate in

フェードイン(徐々に現れる)
ズームイン(次第に大きくなる)
バウンドイン(跳ね返る)
スライドイン
回転する

Fade In Left

Fade In Down

Fade In Right

Zoom In Right

Zoom In Up

Zoom In Left

Bounce In Left 
Bounce In Down
Bounce In Right

Slide in Right

Slide In Up

Slide In Left

Rotate In Up Left
Rotate In Down Left
Rotate In Up Right

Bounce

Shake

Rubber Band