スクロール演出用パーツ｜コピペで使えるHTML/CSS/JSパーツ集

others-sticky1

セクションが終わるまで左側の見出しが固定表示されます。ステップ案内などに。

<h2>others-sticky1-parts</h2>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル１</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル２</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル３</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

</div>

</section>

html

/*sticky1-parts
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.others-sticky1-parts .list-parts {
	margin-bottom: 4rem;	/*下に空けるマージン*/
}

/*タイトルブロック*/
.others-sticky1-parts .title-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;	/*テキストをセンタリング*/
}

/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

/*ブロック１個あたりの設定*/
	.others-sticky1-parts .list-parts {
		display: flex;
		align-items: flex-start;
		gap: 4rem;	/*タイトルと画像が入った右側ブロックの間のスペース。４文字分。*/
		position: relative;
	}
	
	/*タイトルブロック*/
	.others-sticky1-parts .title-parts {
		width: 30%;	/*幅*/
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
	
	/*右側のブロック*/
	.others-sticky1-parts .text-parts {
		flex: 1;
	}

}/*追加指定ここまで*/

/*ステップボックス
---------------------------------------------------------------------------*/
ul.others-step1 {
	margin: 0 !important;padding: 0 !important;
	list-style: none;
}

/*ステップ１個あたり*/
ul.others-step1 li {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
	position: relative;
	border: 2px solid var(--bg-inverse-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのbg-inverse-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*「▼」のマーク*/
ul.others-step1 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。本来の場所より上に２文字分の場所。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.3;	/*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.others-step1 li:last-child::after {
	content: "";
}

/*primaryカラーの場合*/
ul.others-step1.primary-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*背景色。theme.cssのprimaryinverse-colorを読み込みます。*/
}
ul.others-step1.primary-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*lightカラーの場合*/
ul.others-step1.light-parts li {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}
ul.others-step1.light-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*accentカラーの場合*/
ul.others-step1.accent-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
ul.others-step1.accent-parts li::after {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

css

others-fixed1

セクションが終わるまで左側の画像ブロックが固定表示されます。ステップ案内などにも。

<h2>others-fixed1-parts</h2>
<ul class="mb3rem">
<li>ウィンドウ上部で画像ブロックが固定表示されます。（600px未満では画像ブロックは非表示。）</li>
<li>デモでは最後のブロックのアクションが確認できるように、sectionにインラインスタイルを直接指定しています。実際にはこのsectionのインラインスタイルは使わないで下さい。下に無駄な余白が発生します。</li>
<li>theme.cssに、Balletフォントが読み込まれていないと別フォントが表示されます。もし入ってない場合は、いずれかのフレームをDLし、theme.cssのBalletの行をコピペしておいて下さい。</li>
</ul>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait1.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">01</span>
<h3>見出し01</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<ul class="others-step2">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
<ul>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait2.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">02</span>
<h3>見出し02</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait3.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">03</span>
<h3>見出し03</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

</div>

</section>

html

/*others-fixed1-parts
---------------------------------------------------------------------------*/
.others-fixed1-parts {
	--img-rate: 0.3;	/*左画像の幅。30%。お好みで。*/
	--stay-gap: 8vh;	/*画像を滞在させる分の高さ。大きいと滞在時間も長くなりますが、その分、テキスト下に余分なスペースが発生します。*/
}

/*各ブロック*/
.others-fixed1-parts .list-parts {
	position: relative;
}

/*画像は初期状態では非表示*/
.others-fixed1-parts .img-parts {
	display: none;
	overflow: hidden;
}

/*画像本体*/
.others-fixed1-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*テキスト側*/
.others-fixed1-parts .text-parts {
	position: relative;
	z-index: 1;
	padding: var(--content-space-s) 0;
}

/*装飾テキスト*/
.others-fixed1-parts .kazari-text {
	display: block;
	text-align: right;
    font-size: 40vw;	/*文字サイズ*/
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1;
	transform-origin: right;
	opacity: 0.1;	/*透明度。色が10%出た状態。*/
	font-family: "Ballet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports not (container-type: inline-size) {
		@media (min-width: 600px) {

.others-fixed1-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
				padding-bottom: var(--stay-gap);
			}

.others-fixed1-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
			}

.others-fixed1-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅（この場合はmain）が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports (container-type: inline-size) {
		@container (min-width: 600px) {

.others-fixed1-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
				padding-bottom: var(--stay-gap);
			}

.others-fixed1-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
			}

.others-fixed1-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}

/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.others-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.others-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.others-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

css

//===============================================================
// others-fixed1-parts
//===============================================================
$(function() {

function isfixed1Desktop() {
		var $main = $('main').first();
		var breakpoint = 600;	// cssのブレイクポイントと合わせる

if (window.CSS && CSS.supports && CSS.supports('container-type: inline-size')) {
			if ($main.length) {
				return $main.innerWidth() >= breakpoint;
			}
			return window.innerWidth >= breakpoint;
		}

return window.innerWidth >= breakpoint;
	}

function resetImgStyle($img) {
		$img.css({
			position: '',
			top: '',
			left: '',
			width: '',
			height: '',
			zIndex: ''
		});
	}

function updatefixed1Parts() {
		var isDesktop = isfixed1Desktop();
		var scrollTop = $(window).scrollTop();
		var winH = window.innerHeight;

$('.others-fixed1-parts').each(function() {
			var $wrap = $(this);
			var $items = $wrap.children('.list-parts');
			var imgRate = parseFloat(getComputedStyle(this).getPropertyValue('--img-rate')) || 0.30;

/*スマホ時は画像を全部リセットして終了*/
			if (!isDesktop) {
				$items.each(function() {
					resetImgStyle($(this).children('.img-parts'));
				});
				return;
			}

$items.each(function(i) {
				var $item = $(this);
				var $img = $item.children('.img-parts');
				var itemTop = $item.offset().top;
				var itemHeight = $item.outerHeight();
				var itemLeft = $item[0].getBoundingClientRect().left;
				var itemWidth = $item.outerWidth();
				var imgWidth = itemWidth * imgRate;
				var afterTop = Math.max(itemHeight - winH, 0);
				var stopTop;

/*最後以外は「次のブロックの先頭まで固定」*/
				if (i < $items.length - 1) {
					stopTop = $items.eq(i + 1).offset().top;
				} else {
					/*最後は「ブロック終端 - 画像高さ」まで固定。その後に上へ流れる*/
					stopTop = Math.max(itemTop, itemTop + itemHeight - winH);
				}

/*まだそのブロックに到達していない*/
				if (scrollTop < itemTop) {
					$img.css({
						position: 'absolute',
						top: 0,
						left: 0,
						width: '',
						height: winH,
						zIndex: i + 1
					});
				}

/*そのブロックの担当中（画面内固定）*/
				else if (scrollTop <= stopTop) {
					$img.css({
						position: 'fixed',
						top: 0,
						left: itemLeft,
						width: imgWidth,
						height: winH,
						zIndex: i + 1
					});
				}

/*担当終了後*/
				else {
					$img.css({
						position: 'absolute',
						top: afterTop,
						left: 0,
						width: '',
						height: winH,
						zIndex: i + 1
					});
				}
			});
		});
	}

var ticking = false;

function requestfixed1Update() {
		if (ticking) return;

ticking = true;

window.requestAnimationFrame(function() {
			updatefixed1Parts();
			ticking = false;
		});
	}

$(window).on('load resize scroll', requestfixed1Update);
	requestfixed1Update();

});

js

others-fixed2

スクロール中、画像ブロックがフェードで入れ替わります。ステップ案内などにも。

<h2>others-fixed2-parts</h2>
<ul class="mb3rem">
<li>スクロール中、画像ブロックがフェードで入れ替わります。（600px未満では画像ブロックは非表示。）</li>
<li>デモでは最後のブロックのアクションが確認できるように、sectionにインラインスタイルを直接指定しています。実際にはこのsectionのインラインスタイルは使わないで下さい。下に無駄な余白が発生します。</li>
<li>theme.cssに、Balletフォントが読み込まれていないと別フォントが表示されます。もし入ってない場合は、いずれかのフレームをDLし、theme.cssのBalletの行をコピペしておいて下さい。</li>
</ul>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait1.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">01</span>
<h3>見出し01</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<ul class="others-step2">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
<ul>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait2.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">02</span>
<h3>見出し02</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait3.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">03</span>
<h3>見出し03</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

</div>

</section>

html

/*others-fixed2-parts
---------------------------------------------------------------------------*/
.others-fixed2-parts {
	--img-rate: 0.3;	/*左画像の幅。30%。お好みで。*/
	--fade-speed: 1s;	/*フェード速度。1秒。お好みで。*/
}

/*各ブロック*/
.others-fixed2-parts .list-parts {
	position: relative;
}

/*画像は初期状態では非表示*/
.others-fixed2-parts .img-parts {
	display: none;
	overflow: hidden;
	opacity: 0;
}

/*画像本体*/
.others-fixed2-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*アクティブな画像だけ表示*/
.others-fixed2-parts .img-parts.is-active-parts {
	opacity: 1;
}

/*テキスト側*/
.others-fixed2-parts .text-parts {
	position: relative;
	z-index: 1;
	padding: var(--content-space-s) 0;
}

/*装飾テキスト*/
.others-fixed2-parts .kazari-text {
	display: block;
	text-align: right;
    font-size: 40vw;	/*文字サイズ*/
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1;
	transform-origin: right;
	opacity: 0.1;	/*透明度。色が10%出た状態。*/
	font-family: "Ballet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports not (container-type: inline-size) {
		@media (min-width: 600px) {

.others-fixed2-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
			}

.others-fixed2-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
				transition: opacity var(--fade-speed) ease;
				pointer-events: none;
			}

.others-fixed2-parts .img-parts.is-active-parts {
				pointer-events: auto;
			}

.others-fixed2-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅（この場合はmain）が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports (container-type: inline-size) {
		@container (min-width: 600px) {

.others-fixed2-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
			}

.others-fixed2-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
				transition: opacity var(--fade-speed) ease;
				pointer-events: none;
			}

.others-fixed2-parts .img-parts.is-active-parts {
				pointer-events: auto;
			}

.others-fixed2-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}

/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.others-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.others-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.others-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

css

//===============================================================
// others-fixed2-parts
//===============================================================
$(function() {

function isfixed2Desktop() {
		var $main = $('main').first();
		var breakpoint = 600;	// cssのブレイクポイントと合わせる

if (window.CSS && CSS.supports && CSS.supports('container-type: inline-size')) {
			if ($main.length) {
				return $main.innerWidth() >= breakpoint;
			}
			return window.innerWidth >= breakpoint;
		}

return window.innerWidth >= breakpoint;
	}

function resetImgStyle($img) {
		$img.removeClass('is-active-parts').css({
			position: '',
			top: '',
			left: '',
			width: '',
			height: '',
			zIndex: ''
		});
	}

function setImgState($img, isActive, cssObj) {
		$img.toggleClass('is-active-parts', isActive).css(cssObj);
	}

function updatefixed2Parts() {
		var isDesktop = isfixed2Desktop();
		var scrollTop = $(window).scrollTop();
		var winH = window.innerHeight;

$('.others-fixed2-parts').each(function() {
			var $wrap = $(this);
			var $items = $wrap.children('.list-parts');
			var itemCount = $items.length;
			var imgRate = parseFloat(getComputedStyle(this).getPropertyValue('--img-rate')) || 0.30;

if (!itemCount) return;

/*スマホ時は画像を全部リセットして終了*/
			if (!isDesktop) {
				$items.each(function() {
					resetImgStyle($(this).children('.img-parts'));
				});
				return;
			}

var $firstItem = $items.eq(0);
			var $lastItem = $items.eq(itemCount - 1);
			var firstTop = $firstItem.offset().top;
			var lastTop = $lastItem.offset().top;
			var lastHeight = $lastItem.outerHeight();
			var lastReleaseTop = Math.max(lastTop, lastTop + lastHeight - winH);
			var lastAfterTop = Math.max(lastHeight - winH, 0);
			var activeIndex = 0;
			var stage;
			var $activeItem;
			var stageLeft;
			var stageWidth;
			var triggerLine = scrollTop + (winH * 0.5);	/*切り替え基準線。0.5=画面中央*/

/*どのブロックが担当中か判定（切り替えは画面中央ライン基準）*/
			$items.each(function(i) {
				if (triggerLine >= $(this).offset().top) {
					activeIndex = i;
				}
			});

if (scrollTop < firstTop) {
				stage = 'before';
				activeIndex = 0;
			} else if (scrollTop > lastReleaseTop) {
				stage = 'after';
				activeIndex = itemCount - 1;
			} else {
				stage = 'active';
			}

$activeItem = $items.eq(activeIndex);
			stageLeft = $activeItem[0].getBoundingClientRect().left;
			stageWidth = $activeItem.outerWidth() * imgRate;

$items.each(function(i) {
				var $item = $(this);
				var $img = $item.children('.img-parts');
				var isActive = (i === activeIndex);

if (!$img.length) return;

/*開始前：1枚目だけ通常位置で見せる*/
				if (stage === 'before') {
					if (i === 0) {
						setImgState($img, true, {
							position: 'absolute',
							top: 0,
							left: 0,
							width: '',
							height: winH,
							zIndex: itemCount + 1
						});
					} else {
						setImgState($img, false, {
							position: 'absolute',
							top: 0,
							left: 0,
							width: '',
							height: winH,
							zIndex: 1
						});
					}
				}

/*担当中：全画像を同じ固定位置に重ね、opacityだけで切り替える*/
				else if (stage === 'active') {
					setImgState($img, isActive, {
						position: 'fixed',
						top: 0,
						left: stageLeft,
						width: stageWidth,
						height: winH,
						zIndex: isActive ? itemCount + 1 : i + 1
					});
				}

/*終了後：最後の画像だけ通常位置に戻して、そのまま上へ流す*/
				else {
					if (i === itemCount - 1) {
						setImgState($img, true, {
							position: 'absolute',
							top: lastAfterTop,
							left: 0,
							width: '',
							height: winH,
							zIndex: itemCount + 1
						});
					} else {
						setImgState($img, false, {
							position: 'absolute',
							top: 0,
							left: 0,
							width: '',
							height: winH,
							zIndex: 1
						});
					}
				}
			});
		});
	}

var ticking = false;

function requestfixed2Update() {
		if (ticking) return;

ticking = true;

window.requestAnimationFrame(function() {
			updatefixed2Parts();
			ticking = false;
		});
	}

$(window).on('load resize scroll', requestfixed2Update);
	requestfixed2Update();

});

js

others-bg-slideup-movie1

スクロール量と少しずれて背景動画が動きます。

<h2>others-bg-slideup-movie1</h2>
<p>スクロールとともに動画が少し上にずれていくパララックス。<br>
微調整はjsで行うことができます。</p>

</section>

<h2>others-bg-slideup-movie1</h2>
<p>動画の色そのまま。</p>

</section>

<h2>others-bg-slideup-movie1 overlay</h2>
<p>動画に半透明の黒を重ね、上にテキスト配置。</p>

<div class="others-bg-slideup-movie1 overlay">
<video class="scrollfx-move bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

<h2>others-bg-slideup-movie1 bleed-x-parts</h2>
<p>幅いっぱい確保したい場合は、others-bg-slideup-movie1にbleed-x-partsを追加して下さい。</p>

</section>

<h2>others-bg-slideup-movie1 overlay bleed-x-parts</h2>
<p>上のオーバーレイタイプ。</p>

<div class="others-bg-slideup-movie1 overlay bleed-x-parts">
<video class="scrollfx-move bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

html

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.others-bg-slideup-movie1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.others-bg-slideup-movie1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.others-bg-slideup-movie1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

/* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

const boxes = Array.from(document.querySelectorAll(".others-bg-slideup-movie1"));
  if (!boxes.length) return;

if (!items.length) return;

const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

let vh = window.innerHeight || 0;
  let ticking = false;

function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

requestTick();
  }

function update(){
    ticking = false;

const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

window.addEventListener("scroll", requestTick, { passive: true });

let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

window.addEventListener("load", measure);
})();

js

others-bg-slideup1

スクロール量と少しずれて背景画像が動きます。

<h2>others-bg-slideup1</h2>
<p>スクロールとともに画像が少し上にずれていくパララックス。<br>
微調整はjsで行うことができます。</p>

</section>

<h2>others-bg-slideup1</h2>
<p>画像の色そのまま。</p>

</section>

<h2>others-bg-slideup1 overlay</h2>
<p>画像に半透明の黒を重ね、上にテキスト配置。</p>

<div class="others-bg-slideup1 overlay">
<img src="images/1.jpg" alt="" class="scrollfx-move">
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

<h2>others-bg-slideup1 bleed-x-parts</h2>
<p>幅いっぱい確保したい場合は、others-bg-slideup1にbleed-x-partsを追加して下さい。</p>

</section>

<h2>others-bg-slideup1 overlay bleed-x-parts</h2>
<p>上のオーバーレイタイプ。</p>

<div class="others-bg-slideup1 overlay bleed-x-parts">
<img src="images/1.jpg" alt="" class="scrollfx-move">
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

html

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.others-bg-slideup1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.others-bg-slideup1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.others-bg-slideup1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

/* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

const boxes = Array.from(document.querySelectorAll(".others-bg-slideup1"));
  if (!boxes.length) return;

if (!items.length) return;

const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

let vh = window.innerHeight || 0;
  let ticking = false;

function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

requestTick();
  }

function update(){
    ticking = false;

const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

window.addEventListener("scroll", requestTick, { passive: true });

let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

window.addEventListener("load", measure);
})();

js

list-yoko-scroll2

縦にスクロール中に横スクロールしだすパーツ。ウィンドウに対して画像高さ100%。

<h2>list-yoko-scroll2-parts（ウィンドウに対して画像高さ100%タイプ）</h2>
<ul class="mb3rem">
<li>デモではアクションが確認できるよう、sectionにインラインスタイルを直接指定しています。実際にはこのsectionは使わないで下さい。無駄な余白が発生します。</li>
<li>横スクロールの速度は、cssのheight: 300vh;の数値で変動します。html側のdata-speed（0.5=slow / 1=normal / 2=fast）でも変化しますが、cssの方が調整幅が広いです。中身の画像数にあわせて調整してみて下さい。</li>
<li>画像によっては非常に縦長にトリミングされる場合もあるので、注意して下さい。画像を見せるというより、装飾要素向き。しっかり画像を見せたい場合は、別cssパターン（list-yoko-scroll3）をご利用下さい。</li>
<li>画面幅いっぱいに使いたい場合は、bleed-x-partsを追加して下さい。（class="list-yoko-scroll2-parts <span class="color-check">bleed-x-parts</span>"）</li>
</ul>

</div>

</div>

</section>

html

/*list-yoko-scroll2-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll2-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll2-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
.list-yoko-scroll2-parts .hscroll1-track {
	display: flex;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll2-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	height: 100%;
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll2-parts .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン（Font Awesome）*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll2-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll2-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

/*各画像*/
	.list-yoko-scroll2-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

css

//===============================================================
//	list-yoko-scroll2-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

$('.list-yoko-scroll2-parts').each(function(){

var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;

/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

/* スクロール処理 */
		$(window).on('scroll resize', function(){

var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

});

js

list-yoko-scroll3

縦にスクロール中に横スクロールしだすパーツ。画像のアスペクト比指定タイプ。

<h2>list-yoko-scroll3-parts（画像のアスペクト比指定タイプ）</h2>
<ul class="mb3rem">
<li>デモではアクションが確認できるよう、sectionにインラインスタイルを直接指定しています。実際にはこのsectionは使わないで下さい。無駄な余白が発生します。</li>
<li>横スクロールの速度は、cssのheight: 300vh;の数値で変動します。html側のdata-speed（0.5=slow / 1=normal / 2=fast）でも変化しますが、cssの方が調整幅が広いです。中身の画像数にあわせて調整してみて下さい。</li>
<li>アスペクト比の変更はcssでできます。</li>
<li>画面幅いっぱいに使いたい場合は、bleed-x-partsを追加して下さい。（class="list-yoko-scroll2-parts <span class="color-check">bleed-x-parts</span>"）</li>
</ul>

</div>

</div>

</section>

html

/*list-yoko-scroll3-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll3-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll3-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
.list-yoko-scroll3-parts .hscroll1-track {
	display: flex;
	align-items: center;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll3-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	aspect-ratio: 1;	/*ここで比率固定。4 / 3などにすればやや横長になります。*/
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll3-parts .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン（Font Awesome）*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll3-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll3-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

/*各画像*/
	.list-yoko-scroll3-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

css

//===============================================================
//	list-yoko-scroll3-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

$('.list-yoko-scroll3-parts').each(function(){

var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;

/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

/* スクロール処理 */
		$(window).on('scroll resize', function(){

var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

});

js

スクロール演出用パーツ