動くWebデザイン
アイディア帳

動きを実現する仕組み

multiScroll.js というライブラリを使い、スクロールをすると分割された左右の画面が別方向に動くアニメーションを実現する。
ギャラリーサイトなど掲載文字数が少ないサイト向け。

＊レスポンシブに対応したい場合は有料プラグイン（https://alvarotrigo.com/multiScroll/extensions/）の購入が必要。
サンプルでは右カラムを非表示にする形で疑似的にレスポンシブ化をしています。

[使用するライブラリ]
＊jQuery
＊jquery.easing.js　※multiScroll.jsを動かすために必要
＊multiScroll.js （https://alvarotrigo.com/multiScroll/）

HTMLの書き方

1. head終了タグ直前にmultiScroll.jsのCSSと、自作のCSSの2つを読み込みます。

   <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">
   </head>
   

2. 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>

3. 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>
   </body>

自作の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,//最後のセクションを下にスクロールして最初のセクションまでスクロールするかどうかを定義します。
});

※オプションには、セクションのスクロールにかかる時間をミリ秒で指定（scrollingSpeed）といった設定が沢山あります。
公式サイト（https://alvarotrigo.com/multiScroll/）を参考にカスタマイズをしてみてください。

この技術を使ったサンプルサイト

• 

  Sample12
  アパレルのブランディングサイト