JS

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.css">
<link rel="stylesheet" type="text/css" href="css/6-3.css">

body内にHTMLを記載します。

<header id="header">
	<h1>Logo</h1>
	<nav>
		<ul id="menu"><!--セクションとリンクするページ内アンカー-->
			<li data-menuanchor="area1" class="active"><a href="#area1">Area 1</a></li>
			<li data-menuanchor="area2"><a href="#area2">Area 2</a></li>
			<li data-menuanchor="area3"><a href="#area3">Area 3</a></li>
		</ul>
	</nav>
</header>

<div id="wrapper">

	<div class="ms-left"><!--ここから左画面-->

		<section class="ms-section" id="left1">
			<div class="sp-top"></div>
			<div class="sp-bottom">
				<h2>Area 1</h2>
				<p>テキストが入ります。</p>
			</div>
		<!--/left1--></section>

		<section class="ms-section" id="left2">
			<div class="sp-top"></div>
			<div class="sp-bottom">
				<h2>Area 2</h2>
				<p>テキストが入ります。</p>
			</div>
		<!--/left2--></section>

		<section class="ms-section" id="left3">
			<div class="sp-top"></div>
			<div class="sp-bottom">
				<h2>Area 3</h2>
				<p>テキストが入ります。</p>
			</div>
		<!--/left3--></section>

	<!--/ms-left--></div><!--/ここまで左画面-->


	<div class="ms-right"><!--ここから右画面-->

		<div class="ms-section" id="right1"></div>
		<div class="ms-section" id="right2"></div>
		<div class="ms-section" id="right3"></div>
	
	<!--/ms-right--></div><!--/ここまで右画面-->

<!--/wrapper--></div>

body 終了タグ直前に jQuery、multiScroll.js、jquery.easing.jsと、動きを制御する自作のJS の4つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!--自作のJS-->
<script src="js/6-3.js"></script>

CSSの書き方

CSSを設定しなくても動きます。

【Headerを上付きにしたい場合】
絶対配置で上部配置し、z-indexの値を大きな数字にしてエリアの重なりの最前面に出す。

#header{
	position: relative;
	z-index:999;
}

【エリアに画像を設定したい場合】
背景画像として、background-image と backgroundsize:cover;（表示エリアいっぱいに画像を表示）を設定する。

#right1{
	background:url("pict.jpg") no-repeat center;/*中央に繰り返しなしで配置*/
	background-size:cover;/*表示エリアいっぱいに画像を表示*/
}

【PC閲覧時のみ（画面が768pxより大きい場合のみ）画面分割を行い、他は1カラムで表示させたい場合】
有料のプラグインを購入するか、右エリアを display:none;で非表示し左エリアに設置している空<div>タグ <div class=”sp-top”></div>に右エリアに設定している背景画像を表示して見せると実現できます。

@media screen and (max-width:768px){
	/*ライブラリで天地中央になっている見せ方を上揃えに上書き*/
	.ms-tableCell{
		vertical-align:top;
	}
	
	/*右上ナビゲーションと右エリア非表示*/
	#menu,
	.ms-right{
		display: none;
	}

	/*左エリアを横幅100%にして画像＋テキストを出す設定*/
	.ms-left{
		width:100%!important;
	}
	
	/*左エリア上部画像設定*/
	.sp-top{
		height:50%;
		margin:0 0 20px 0;
	}
	
	#left1 .sp-top{
		background:url("pict.jpg") no-repeat center;
		background-size:cover;
	}	
}

JSの書き方

画面分割をするエリアのID #wrapper を指定して動かす。
HTMLメニュー内のページ内リンクと連動するID名は、 anchorsで指定する。

$('#wrapper').multiscroll({
	sectionsColor: [ '#333', '#444', '#555','#333', '#444', '#555' ],//セクションごとの背景色設定
	anchors: [ 'area1', 'area2', 'area3','area4','area5','area6' ],//セクションとリンクするページ内アンカーになる名前
	menu: '#menu',//上部ナビゲーションのメニュー設定
	navigation: true,//右のナビゲーション出現、非表示は false
	navigationTooltips:[ 'Area1', 'Area2', 'Area3','Area4','Area5','Area6' ],//右のナビゲーション現在地時に入るテキスト
	loopTop: true,//最初のセクションを上にスクロールして最後のセクションまでスクロールするかどうかを定義します。
	loopBottom: true,//最後のセクションを下にスクロールして最初のセクションまでスクロールするかどうかを定義します。
});