スクロールをするとかっこよく要素が出てくる「jquery.inview.js」(デモあり)

2017.6.9 ,

スクロールすると要素がふわっと出現していくサイト、オシャレですよねー!
あれやってみたいなー!って思ってたんですが、「inview.js」というjQueryでできるんですね。

こんなに簡単にできたんだなぁということで、こちらのブログ(North-Geekさま)を参考に、デモを作ってみました。

デモ

デモサイトはこちら

インストール

ひとまず「jquery.inview.js」から一式をダウンロードします。

設定

必要なjsやcssを適当なディレクトリに格納し、リンクをhead内に入れていきます。

私がデモサイトで使った効果は「フェードイン」「フェードイン+上移動」「3D回転」です。一例としてフェードインの設定を掲載します。

フェードインの場合

js設定

html設定

css設定

.effectについている設定はどの効果でも共通のものです。