前提・実現したいこと

エフェクトの効いたウェブサイトを作るために「multiScroll.js」を使っています。
↓サンプル
https://alvarotrigo.com/multiScroll/#first

しかし実際にダウンロードして試してみると「画像を画面全体に表示してスクロールしたときに左右に割れる画面を作る方法」がわかりません。

どうすればそれが実現できるかお助けいただけないでしょうか？

発生している問題・エラーメッセージ

現在実装したものをGithubに上げており、見れる形にしたものが以下のものです。画像の表示をどのコードの部分に記載すればいいかわからず、画面の片側に表示されています。また高さもあっておらず表示がリピートされています。
https://k49977.github.io/multiscroll/#first

該当のソースコードは以下です。

html
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml">
3
4<head>
5	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6	<title>multiscroll.js - split multi-scrolling pages plugin</title>
7	<meta name="author" content="Alvaro Trigo Lopez" />
8	<meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
9	<meta name="keywords"  content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
10	<meta name="Resource-type" content="Document" />
11
12
13	<link rel="stylesheet" type="text/css" href="../jquery.multiscroll.css" />
14	<link rel="stylesheet" type="text/css" href="examples.css" />
15	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
16	<script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
17	<script type="text/javascript" src="../jquery.multiscroll.js"></script>
18
19	<script type="text/javascript">
20	 $(document).ready(function() {
21            $('#myContainer').multiscroll({
22            	sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
23            	anchors: ['first', 'second', 'third'],
24            	menu: '#menu',
25            	navigation: true,
26            	navigationTooltips: ['One', 'Two', 'Three'],
27            	loopBottom: true,
28            	loopTop: true
29            });
30        });
31    </script>
32</head>
33<body>
34
35
36<ul id="menu">
37	<li data-menuanchor="first"><a href="#first">First slide</a></li>
38	<li data-menuanchor="second"><a href="#second">Second slide</a></li>
39	<li data-menuanchor="third" style="background-image: url('./imgs/multiscroll.png');"><a href="#third">Third slide</a></li>
40</ul>
41
42<div id="myContainer">
43
44	<div class="ms-left">
45
46		<div class="ms-section" id="left1">
47			<div class="ms-tableCell" style="height: 2122px;">
48					<div class="graduated"></div>
49					<div class="fullscreen">
50						<h1>multiScroll.js</h1>
51						<h2>Create divided multi-scrolling pages.</h2>
52						<div id="download"><a href="https://github.com/alvarotrigo/multiscroll.js/archive/master.zip">Download</a></div>
53						<br>
54						<img src="imgs/multiscroll.png" alt="multiscroll" height="257" width="265">
55						<p id="extensions-text">
56							<a href="https://alvarotrigo.com/multiScroll/extensions">multiScroll Extensions</a>
57						</p>
58					</div>
59				</div></div>
60
61		<!-- <div class="ms-section" id="left1" style="background-image: url('./imgs/multiscroll.png');">
62			<h1>Left 1</h1>
63		</div> -->
64
65		<div class="ms-section" id="left2">
66			<h1>Left 2 </h1>
67		</div>
68
69		<div class="ms-section" id="left3">
70			<h1>Left 3</h1>
71		</div>
72	</div>
73
74	<div class="ms-right">
75		<div class="ms-section" id="right1" style="background-image: url('./imgs/tiger.jpeg');">
76			<h1>Right 1</h1>
77		</div>
78
79		<div class="ms-section" id="right2">
80			<h1>Right 2</h1>
81		</div>
82
83		<div class="ms-section" id="right3">
84			<h1>Right 3</h1>
85		</div>
86	</div>
87</div>
88
89</body>
90</html>

https://github.com/k49977/multiscroll/blob/master/examples/example.html

もしわかる方がいればアドバイスください。

補足情報（FW/ツールのバージョンなど）

Chromeバージョン: 81.0.4044.122
jquery 1.8.3
multiscroll.js

kei344

2020/05/03 16:34

コードは外部サービスだけでなく、質問文にコードブロックでお書きください。

k499778

2020/05/03 16:44

わかりました。ちなみにその理由はなぜでしょうか？

miyabi_pudding

2020/05/03 21:29 編集

Gitだと特にですが、ダウンロードないし、アクセスしないと、中身を確認できず、すぐに回答に入ることができないからです。工程が多くなると、回答に移るまでの手間が重なり、敬遠されがちになります。そうなると回答自体を得るのが難しくなります。それよりは、質問文にも記載があった方が、検証前にある程度当たりが取れますし、検証せずとも、回答行動に移れることが、多くなります。つまり、質問本文に記載いただいた方が、お互いにいい効果が得られるということです。

k499778

2020/05/04 01:27

ダウンロードしなくていいように今回publicにシステムを上げて公開しています。またソースコードに関しては開示だけなのでとくにダウンロードしなくても見れるようになっています。手間が増える点はそうですよね。

行動規範の内容に同意します

回答2件

ベストアンサー

画像を画面全体に表示してスクロールしたときに左右に割れる画面
画像の表示をどのコードの部分に記載すればいいかわからず

画像を画面全体に表示しつつ、スクロール時に左右に割れたように見せるには、CSS の background で、画像の左半分を背景にしたセクションと画像の右半分を背景にしたセクションを設定するようです。

次のページが参考になるかもしれません。

MDN background-image
MDN background-size

CSSスプライト的に半分に分けつつ、画像リソースは使いまわす（同じURL）形になりそうですね。

回答の内容について

ご質問に示されたmultiScroll.js のページのソースと開発者コンソールのElementsタブを確認しました。

確認内容の概要

#myContainer > .ms-left 内

.section1 ダウンロード案内コンテンツあり
.section2 キャッチコピーコンテンツあり
.section3 マークアップ事例コンテンツあり

#myContainer > .ms-right 内は

.section1 コンテンツなし（CSSによる真っ青な領域）
.section2 コンテンツなし（CSSによる背景：大きなネコ）
.section3 コーヒーの画像（アイキャッチ的に画像要素）

マウス操作などの動作確認をすると、左右に分割されるようで、実はそうではない「フェイクな分割表現」です。

section1 の download ボタンは左右に別れることなく左側の領域とともに画面上部に消えています。
section2 キャッチコピーは左側に収まるので自然に見える。
section3 コードサンプルコンテンツは上方に、コーヒー画像は下方に

文書構造

SEO配慮で以下の文脈になっています。

.ms-left > .section1 ダウンロード案内コンテンツあり
.ms-left > .section2 特長広告コンテンツあり
.ms-left > .section3 マークアップ事例コンテンツあり
.ms-right > .section3 コーヒーの画像（アイキャッチ的に画像要素）

（ .ms-right > .section1, .ms-right > .section2 は装飾用に空っぽの div を配した形）

投稿2020/05/04 02:00

AkitoshiManabe

総合スコア5434

k499778

2020/05/04 02:01

ありがとうございます！確認します！

k499778

2020/05/04 02:50 編集

Section1の「multiscroll.png」に関しては、片方側セクションへの指定のみで実際は分割してるように見えます。ご説明頂いた内容だとセクションの左右に半分ずつの画像を指定（CSSスプラッシュ的に）するようにお見受けするのですが、ここはどのような動きになっているのでしょうか？片側だけの指定でできているのか、それとも両側に指定されているのか。が知りたいです。 https://alvarotrigo.com/multiScroll/#first

AkitoshiManabe

2020/05/04 03:42 編集

>片方側セクションへの指定のみで実際は分割してるように見えます。低スペックマシンで確認すると、フェイクであることが目視できます（当方、Raspberry Pi 3B での確認/３ｄレンダリングできないモデルナンバーなので錯覚を起こせず、見破ることができたのだと思います）。 CSSスプライトですね。両方の同じセクション番号に指定してみてください。

k499778

2020/05/04 04:27

ありがとうございます！

k499778

2020/05/04 05:23

まだ画像を２つに分けて表示することができていません。もしおわかりでしたら教えていただけると助かります。サンプルコードがあれば嬉しいです。

行動規範の内容に同意します

以下のような形でスマホ画面で見た際画面真ん中に画像があるような風に表示することはできました。
htmlは1000文字のバリデーションに引っかかるのでリンクでご了承ください
https://github.com/k49977/multiscroll/blob/master/examples/example.html

css
1.graduated,
2.fullscreen{
3	position: absolute;
4	width:200%;
5	height: 100%;
6	left: 0;
7	z-index: 1;
8	vertical-align: middle;
9	text-align: center;
10	 -webkit-box-sizing: border-box;
11    -moz-box-sizing: border-box;
12    box-sizing: border-box;
13}