jquery.inviewで要素にアニメーション効果
スクロールして要素まで到達したらアニメーション効果を入れてコンテンツを表示します。
アニメーションはフェードインやムーブイン、3D回転など様々ですが、今回はよく使う4種類についてメモしておきます。
demoはこちら
Ⅰ.jquery.inviewのダウンロード
まずはここからjquery.inviewをダウンロードし、
解凍した中からjquery本体とjquery.inview.jsを取り出しhead内に挿入し、head内にjavascriptを書いて実行する。
Ⅱ.htmlの設定
アニメーション効果をいれる要素にクラスを設定するだけ( ここでは.animation )。とっても簡単!!
Ⅲ.アニメーションの種類
jquery.inviewには可能なアニメーションが多数ありますが、ここでは自分がよく使うアニメーション4つをメモしておきます
1.ズームイン・バージョン
2.フェードイン・バージョン
3.フェードイン + 上移動・バージョン
4.ズームイン + 3D回転・バージョン