2021.12.4｜JavaScript（jQuery）

画面スクロールでメニューの色が変わるグローバルナビゲーションjQuery「inview」の設定方法

画面スクロールでメニューの色が変わるグローバルナビゲーションjQuery「inview」の設定方法

ランディングページ（LPページ）でよく使われる、Parallax（パララックス）要素を用いて、画面を下にスクロールするとナビゲーションの色が変わるグローバルナビゲーションがあります。
Parallax（パララックス）とは日本語で「視差」「視差効果」という意味になります。
縦長ページでパララックスが用いられることが多く、画面スクロールしたときにアクションを起こすといった要素が沢山あります。
画面スクロールでメニューの色が変わるグローバルナビゲーションは、JavaScriptで設定することによって実装できます。

画面スクロールでメニューの色が変わるグローバルナビゲーション「jquery inview」の設定方法を紹介します。

本記事の内容

画面スクロールでメニューの色が変わるグローバルナビゲーションの設定方法

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

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

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

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

htmlファイルに記述（グローバルナビゲーション）
<div id="navi">
<ul>
<li class="current" id="nav01"><a class="png_bg" href="#wrapper"><img alt="TOP" src="/sample/011/img/navi_01.png" /></a></li>
<li id="nav02"><a href="#about01"><img alt="BOX01" src="/sample/011/img/navi_02.png" /></a></li>
<li id="nav03"><a href="#about02"><img alt="BOX02" src="/sample/011/img/navi_03.png" /></a></li>
<li id="nav04"><a href="#about03"><img alt="BOX03" src="/sample/011/img/navi_04.png" /></a></li>
<li id="nav05"><a href="#about04"><img alt="BOX04" src="/sample/011/img/navi_05.png" /></a></li>
<li id="nav06"><a href="#about05"><img alt="BOX05" src="/sample/011/img/navi_06.png" /></a></li>
<li id="nav07"><a href="#about06"><img alt="BOX06" src="/sample/011/img/navi_07.png" /></a></li>
</ul>
</div>
htmlファイルに記述（メインコンテンツ）
<div id="content_main" class="box">
パララックス効果を出すグローバルメニューです。<br>
<br>
スクロールしていくと、次々にコンテンツが表示され、<br>
右のグローバルメニューが変化していきます。
</div>
<div id="about01" class="box">
アニメーションパララックスグローバルメニュー 1ブロック目
</div>
<div id="about02" class="box">
アニメーションパララックスグローバルメニュー 2ブロック目
</div>
<div id="about03" class="box">
アニメーションパララックスグローバルメニュー 3ブロック目
</div>
<div id="about04" class="box">
アニメーションパララックスグローバルメニュー 4ブロック目
</div>
<div id="about05" class="box">
アニメーションパララックスグローバルメニュー 5ブロック目
</div>
<div id="about06" class="box">
アニメーションパララックスグローバルメニュー 6ブロック目
</div>
cssファイルに記述
#navi {
	overflow: hidden;
	position: fixed;
	right: 10px;
	top: 183px;
	width: 136px;
	z-index: 19999;
}
#navi li {
	height: 1%;
}
#navi li a {
	display: block;
	width: 136px;
	height: 50px;
	background-image: url(/sample/011/img/navi_01.jpg);
	background-position: 0 0;
	background-repeat: none;
	text-indent: -9999px;
}
#navi li a:hover,
#navi li.current a {
	background-position: -136px 0;
}
#navi li#nav01 a {	background-image: url(/sample/011/img/navi_01.jpg); }
#navi li#nav02 a {	background-image: url(/sample/011/img/navi_02.jpg); }
#navi li#nav03 a {	background-image: url(/sample/011/img/navi_03.jpg); }
#navi li#nav04 a {	background-image: url(/sample/011/img/navi_04.jpg); }
#navi li#nav05 a {	background-image: url(/sample/011/img/navi_05.jpg); }
#navi li#nav06 a {	background-image: url(/sample/011/img/navi_06.jpg); }
#navi li#nav07 a {	background-image: url(/sample/011/img/navi_07.jpg); }
JavaScriptファイルに記述
/* ナビゲーション
-----------------------------*/
$(function(){
	$('#wrapper').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			if (topOrBottomOrBoth == 'top')
			{
				$("#navi li").removeClass("current");
				$("#navi #nav01").addClass("current");
			}
		}
	});

	$('#about01').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			if (topOrBottomOrBoth == 'top')
			{
				$("#navi li").removeClass("current");
				$("#navi #nav02").addClass("current");
			}
		}
	});

	$('#about02').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			if (topOrBottomOrBoth == 'top')
			{
				$("#navi li").removeClass("current");
				$("#navi #nav03").addClass("current");
			}
		}
	});

	$('#about03').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			if (topOrBottomOrBoth == 'top')
			{
				$("#navi li").removeClass("current");
				$("#navi #nav04").addClass("current");
			}
		}
	});

	$('#about04').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			if (topOrBottomOrBoth == 'top')
			{
				$("#navi li").removeClass("current");
				$("#navi #nav05").addClass("current");
			}
		}
	});

	$('#about05').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			if (topOrBottomOrBoth == 'top')
			{
				$("#navi li").removeClass("current");
				$("#navi #nav06").addClass("current");
			}
		}
	});

	$('#about06').bind('inview', function (event, visible, topOrBottomOrBoth) {
		if (visible == true) {
			if (topOrBottomOrBoth == 'top')
			{
				$("#navi li").removeClass("current");
				$("#navi #nav07").addClass("current");
			}
		}
	});
});

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>

実装サンプル

実装サンプルを作りましたのでこちらでも確認してみてください。
jQuery inview Plugin デモ

まとめ

以上で設定完了となりますが、簡単に設定ができますね。
Parallax（パララックス）要素はグローバルナビゲーションだけでなくコンテンツや画像に利用できる要素も沢山あります。実装が難しかったりはしますが、色んな要素を実装できるようになると視覚的におもしろい効果を生みます。

«
»

関連記事