jQuery>jquery.inviewに変更したら見やすいサイトの動きになった

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日

追記:現在のテーマでは使用していません。
現在はKYOというテーマを使っています

 

たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。
そういうサイトを見ると、真似したくなりますよね?

でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!

 

 

 

jqueryのプラグインにjquery.inviewというものがあります。

 

 

 

今まではaosというものを使っていました。
使いやすさはaosが最強なのですが、自分でコード書いて制御したい場面もあります。

 

 

 

今まではスクロールされて要素が表示されたら、フェードインするというのもを、スクロールされて表示される度に行うようになっていました。

 

画面がチラチラしてしまうのでストレスを感じてしまうこともあります。

 

なので一度フェードインした要素は、そのまま表示させておきたいと思い、今回はjquery.inviewというプラグインを使いました。

 

 

jquery.inviewはGitHubからダウンロードできます。

ダウンロード

 

 

ワードプレスで利用する場合は

こんな感じで利用します。

 

あとは操作したい要素に適当なクラス名なりをつけてjqueryで操作します

 

 

引数が厄介ですがこれだけのコードです。

if (isInView)で画面に表示されたらということになり、画面に表示されたらopacity: 1にする。

 

 

 

 

css側では

 

 

というふうに初期値を透明で設定してあげます。
画面領域に入ったら表示する。

という流れです。