STRIX | ストリックスマーケティング HP制作会社

STRIX | ストリックスマーケティング HP制作会社

jquery関連

jquery.inviewで要素にアニメーション効果

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回転・バージョン