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

2017.6.9 ,

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

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

デモ

デモサイトはこちら

インストール

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

設定

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.inview.js"></script>

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

フェードインの場合

js設定

<script type="text/javascript">
//フェードイン
$(function() {
	$('.ef-fade01').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
	console.log(isInView);
	if(isInView){
		$(this).stop().addClass('fade01');
	}
	else{
		$(this).stop().removeClass('fade01');
	}
});
});
</script>

html設定

 <!-- =======.cont01  -->
  <section class="effect">
    <h2>フェードイン</h2>
    <ul>
      <li class="ef-fade01"><img src="img/nuko01.jpg"></li>
      <li class="ef-fade01"><img src="img/nuko02.jpg"></li>
      <li class="ef-fade01"><img src="img/nuko03.jpg"></li>
    </ul>
      <ul>
      <li class="ef-fade01"><img src="img/nuko01.jpg"></li>
      <li class="ef-fade01"><img src="img/nuko02.jpg"></li>
      <li class="ef-fade01"><img src="img/nuko03.jpg"></li>
    </ul>
  </section>
  <!-- end*.cont01 -->

css設定

.effect {
	overflow: hidden;
}
.effect li {
	transition: .8s;
}
.ef-fade01 {
	opacity: 0;
}
.fade01 {
	opacity: 1.0;
}

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

B!