”jquery.inview”を使って画面内に現れた要素にフェードインなどの動きをつける方法

JavaScript/jQuery

”jquery.inview”を使ってスクロールで画面内に現れた要素にフェードインなどの動きをつける方法と記述例を紹介します。

”jquery.inview”の使用手順

1. jQueryを読み込ませる

ダウンロードやCDNでhtmlファイルにjQueryを読み込ませる

・jQuery
・CDN(Google)

2. ”jquery.inview”を読み込ませる

”jquery.inview”のページで”jquery.inview.js”をダウンロードして設置し、htmlファイルに読み込ませる

3. scriptにinview後の処理を記述

scriptを記述し、”jquery.inview”でつけたい動きを指定する

記述例

ここからは、指定した要素が画面内に表示されたらフェードインするようにしたい場合の記述例を紹介します。
ここでは、htmlのフェードインさせたい要素に”fade”というclass名をつけておき、”jquery.inview”で要素が画面内に入ったら”fade”というclass名の要素に”fade-in”というclass名をつけることで、CSSで記述したフェードインの動きが実行されるようにしてみます。

1. jQueryを読み込ませる

htmlのheadタグ内にjQueryを読み込ませる記述をします。
ここでは、GoogleのCDNからjQuery(v3.4.1)を読み込ませる記述例を紹介します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2. ”jquery.inview”を読み込ませる

htmlのheadタグ内に”jquery.inview”を読み込ませる記述をします。
ここでは、ダウンロードした”jquery.inview.js”をjsフォルダ内に置いた場合の記述例になります。


<script src="js/jquery.inview.js"></script>

3. 要素にclassをつける

ここでは、動きをつけたいhtmlの要素に”fade”というclass名をつけます。


<div class="fade">[動きをつけたい要素]</div>

4. CSSに動きに応じた記述をする

ここではCSSで、”fade”というclass名をつけた要素に”opacity: 0;”を指定しておき、”fade-in”というclass名がついたときに”opacity: 1;”が指定されるようにします。(”transition: .8s;”でゆっくりと移行するようにも指定しています。)


.fade {
opacity: 0;
transition: .8s;
}

.fade-in {
opacity: 1;
}

動きに関してはanimate.cssなどを使うと簡単に指定することもできます。

5. scriptを記述して”jquery.inview”でclassをつけるようにする

ここでは、”fade”というclass名をつけた要素が画面内に入ったら”fade-in”というclass名をつけるようにします。
この記述例では、指定した要素が最初に画面内に入ったときだけフェードインします。指定した要素が画面内に入るたびに何回でもフェードインさせたい時はelse文を追加するなどして対処しましょう。


<script>
	$(function() {
	  $('.fade').on('inview', function(event, isInView){
		if (isInView) {
			$(this).addClass('fade-in');
		}
	  });
	});
</script>

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください