画面スクロールで表示されたタイミングで画像が横から現れるjQuery「inview」の設定方法

2021.12.4｜JavaScript（jQuery）

ホームページ閲覧時に画面を下にスクロールすると横から画像が現れたりするWebサイトがあります。
パララックス要素とも言われることがありますが、写真や画像を動かしたりフェードインやフェードアウトさせたりすることができます。

スクロールしたタイミングで画像をフェードインさせるには、JavaScriptで設定することによって実装できます。

画面スクロールで表示されたタイミングで画像を横から現れる「jquery inview」の設定方法を解説します。

画面スクロールで表示されたタイミングで画像が横から現れる設定方法

1.jQueryライブラリをダウンロード

下記からJavaScriptライブラリ、のダウンロードを行ってください。
jqueryライブラリダウンロード
 jQuery Easing Pluginダウンロード
 jQuery inview Pluginダウンロード

2.html、css、JavaScriptファイルを作成

html、css、JavaScriptファイルを作成します。

htmlファイルに記述

<div id="topics">
<div class="para">
<h2><img src="/sample/009/img/para.png" alt="パララックス要素を使って画像を横から動かす" /></h2>
</div>
<div class="inner"></div>
</div>

cssファイルに記述

#topics .para {
	position: relative;
	height: 300px;
	z-index: 9999;
}
#topics .inner {
	height: 300px;
	padding: 0 60px;
	position: relative;
}
#topics .para h2 {
	position: absolute;
	top: 300px;
	left: 0px;
	height: 300px;
	width: 640px;
}

JavaScriptファイルに記述

$(function(){
	
  $("#topics .para h2").css({left : "1500px"});


  //
	$('#topics .inner').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			// element is now visible in the viewport
			if (topOrBottomOrBoth == 'top')
			{
				$("#topics .para h2").animate({left: "0px"}, 800, "easeOutExpo");
			}
			else if (topOrBottomOrBoth == 'bottom')
			{
				// bottom part of element is visible
			}
			else
			{
				// whole part of element is visible
			}
		} else {
			//$("#topics .para h2").animate({left: "1500px"}, 800, "easeInExpo");
		}
	});

});

3.htmlファイル内に記述

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

htmlファイルにJavaScriptの記述

<meta charset="UTF-8">
<title>画面スクロールで表示されたタイミングで画像を横から現れる「jquery inview」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="パララックス要素を使って画像を横から動かすjQueryのご紹介を致します。">
<meta name="keywords" content="パララックス要素,パララックス,jquery.inview.js,画像,動かす,スクロール">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/009/base.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/sample/009/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/sample/009/jquery.inview.js"></script>
<script type="text/javascript" src="/sample/009/config.js"></script>