jquery.inviewとは?

こちらのプラグインは要素が画面内に表示された際に処理を発生させるものとなります。様々なWebサイトを観覧していると、下からフワッとテキストが浮かんできたり、横からニョキっと画像が表示されたりする動きを見た事があると思いますが、あの動きを簡単に実装出来てしまうとても優秀で柔軟性の高いプラグインとなります。HTML及びCSSの知識が最低限あればどなたでも実装出来ると思いますので、jQueryに苦手意識がある方も是非この機会にお試し下さい。それではまず下準備を行っていきましょう。

実装に必要なもの

■jQuery(本体)
■jquery.inview
jquery.inviewのダウンロードはこちらから(GitHub)

具体的な実装方法


前回同様、実装サンプルのZIPファイルを用意しておきます。
サクッと実装してしまいたい方はこちらをご使用下さい。
実装サンプルのDLはこちら

それではまずHTML

次にCSS

最後にちょこっとjQuery

※jQuery1系・2系を使用するのであれば今回の様にcssでdisplay:none;を使用せずに、jQueryのコード内に

としてあげてもいいかもしれません。

【if】が画面内に入った時の動きで【else】が戻り値となります。

まとめ

いかがでしたでしょうか?
今回はユーザーの視覚(画面表示)に入った時点で要素に動きを与える事が可能になるjQueryプラグイン、jquery.inviewの実践についてご紹介させていただきました。サイト全ての要素に実装しアクティビティー溢れる印象を与える・強い印象を与えたい要素のみに実装しインパクトを狙う等、様々な目的用途に応じて使い分ける事が可能と考えますので、是非1度お試し頂けましたら幸いです。