スクロールパラパラのつくり方

切り抜くためのプロパティ

polygon()の括弧の中には、多角形の角（かど）の座標位置を、時計回りに,（カンマ）区切りで指定します。角を表す座標位置は、X座標とY座標を半角スペースで区切って指定します。
例えば、下図のような形状に切り抜くには、polygon(54px 106px, 152px 38px, 271px 103px, 217px 222px, 83px 220px, 99px 156px)という具合。角の数が多いとけっこう長ったらしくなっちゃいますね。

今回は四角形なので、左上、右上、右下、左下の順に指定することにします。
例えば、下図みたく、画像の中央ら辺を四角く切り抜きたい時には、polygon(20px 120px, 280px 120px, 280px 220px, 20px 220px)という具合に指定すればよいですね;D。

Can I use...によると、Safariではベンダープレフィックスが必要のようなので、-webkit-clip-path: polygon()も一緒に指定しておきます。

.clip {
	-webkit-clip-path: polygon(20px 120px, 280px 120px, 280px 220px, 20px 220px);
	clip-path: polygon(20px 120px, 280px 120px, 280px 220px, 20px 220px);
}

未対応のブラウザのために

ただし、IEとEdgeは、clip-pathプロパティに未対応なので、代わりにclipプロパティを使うことにします。
clip-pathプロパティとちょっと似ているけれど、clipプロパティは矩形にしか切り抜くことができません。あと、座標の指定の仕方が違ったり、適用する要素には、positionプロパティでabsoluteかfixedを指定してある必要があるので注意です。
clipプロパティで四角く切り抜くには、rect()という関数を使います。括弧の中には、要素の上端から、切り抜く上辺/下辺までの距離と、要素の左端から、切り抜く左辺/右辺までの距離を、上辺、右辺、下辺、左辺の順に指定します。ちょっと複雑だけれど、図にすると以下の通り。上のclip-pathプロパティのサンプルと同じように切り抜きたい場合には、rect(120px, 280px, 220px, 20px)という具合に指定すればよいことになります。

clip-pathプロパティの時と、並べる順番は違うけれど、使う“値”は一緒なので、割とわかりやすいんじゃないでしょうか:)。

.clip {
	position: absolute;
	top: 200px;
	left: calc(50% - 200px);
	clip: rect(120px, 280px, 220px, 20px);
}

うまく切り抜くことができました！
けどなんだか、clipプロパティだけでも、ChromeやSafariで問題なく切り抜けてるようですね…（2019年1月現在）。
実は、clipプロパティは“ウェブ標準から削除されて非推奨”とのことで、いずれ使えなくなるプロパティなんです（下記ページ参照のこと）。なので、clipプロパティは、あくまでIE/Edge用として指定しておくことになります。

clip | MDN

li要素の座標位置を取得する

まずは、すべてのli要素の各辺の座標位置を取得して、スクロールするたびにli要素の形状の通りに、clip-path/clipプロパティの値を作って、div要素に適用していきます。

すべてのli要素の姿形を取得しないといけないので、ページがすべて読み込まれてから実行します。
以下のように書くと、ページが読み込まれたのを見計らって、{ }の中に書いたJavaScriptが実行されます。

document.addEventListener('DOMContentLoaded', function() {
	︙
});

ページの読み込みが完了したら、最初に、itemsという変数に、すべてのli要素を代入しておきます（下記4行め）。と同時に、すべてのli要素の情報を、itemDataという変数に保持しておきます（下記12行めから）。
li要素の情報を代入してゆく処理は以下のとおり。gatItemData()という関数にまとめます。

var items, itemData = [];
document.addEventListener('DOMContentLoaded', function() {
	items = scprElm.querySelectorAll("#scpr li");
	gatItemData();
});
function gatItemData() {
	let scTop = window.pageYOffset;
	for (let i = 0; i < items.length; i++) {
		let itemRect = items[i].getBoundingClientRect();
		itemData[i] = {
			div: items[i].firstElementChild,
			top: itemRect.top + scTop,
			left: itemRect.left,
			width: itemRect.width,
			height: itemRect.height + scTop
		}
	}
}

gatItemData()では、li要素の数の分だけfor文で繰り返し処理を行って、

• li要素の中のdiv要素
• 画面の上端からli要素の上辺までの距離
• 画面の上端からli要素の下辺までの距離
• 画面左端からli要素の左辺までの距離
• 画面左端からli要素の右辺までの距離

という5つの情報を順に取得して、itemDataの中に、li要素ごとに配列として保持していきます。

そのほかJavaScriptのメソッドなどについては、詳しくは以下のサイトを参照のこと。

• JavaScript で DOM 要素の絶対座標を取得する方法 | phiary
• Element.firstElementChild - 最初の子要素を取得する

スクロール中は“取得して適用”を繰り返す

スクロール中に行う処理はclipScrollという関数にまとめます。
保持しておいたitemDataの値と、現在のスクロール位置を元に、clip-path/clipプロパティ用の値を作って、div要素に適用します。

function clipScroll() {
	let scTop = window.pageYOffset;
	let left = itemData[0].left + "px";
	let right = itemData[0].right + "px";
	for (let i = 0; i < items.length; i++) {
		let top = itemData[i].top - scTop + "px";
		let btm = itemData[i].btm - scTop + "px";
		
		itemData[i].div.style["clip"] = "rect(" + top + "," + right + "," + btm + "," + left + ")";
		let clipPath = left + " " + top + "," + right + " " + top + "," + right + " " + btm + "," + left + " " + btm;
		itemData[i].div.style["-webkit-clip-path"] = "polygon(" + clipPath + ")";
		itemData[i].div.style["clip-path"] = "polygon(" + clipPath + ")";
	}
}

この関数を、ブラウザ画面（window）がスクロールしている時に実行されるよう、以下のように、「スクロールイベントが発生した時の処理」として、clipScroll()を登録します。
また、ブラウザ画面のサイズを変更して、li要素の位置がズレた場合には、改めてli要素の座標位置を取得し直さないといけないので、「リサイズイベントが発生した時の処理」として、gatItemData()も登録しておきます。

document.addEventListener('DOMContentLoaded', function() {
	items = scprElm.querySelectorAll("#scpr li");
	gatItemData();
	window.addEventListener("scroll", clipScroll);
	window.addEventListener("resize", gatItemData);
});

その他、もろもろ調整したらできあがり（詳しくはソースコードを参照のことX‹）！

未対応のブラウザだけJavaScriptにする

clipプロパティとclip-pathプロパティを両方とも指定しておくのは無駄なので、clip-pathプロパティに対応しているブラウザではclip-pathプロパティだけ、対応していないものはclipプロパティだけ適用するようにしたいです。
ブラウザが該当のプロパティに対応しているかどうか判別するには、以下のように書きます。

let div = document.createElement("div");
div.style.cssText = "clip-path: polygon(1px 1px, 9px 1px, 9px 9px, 1px 9px);";
div.style.cssText += "-webkit-clip-path: polygon(1px 1px, 9px 1px, 9px 9px, 1px 9px)";
let hasClipPath = div.style.length > 0;

一旦、JavaScriptの中だけでdiv要素を作って、そのdiv要素のstyle属性にclip-path: polygon(1px 1px, 9px 1px, 9px 9px, 1px 9px)というスタイルを書き込んでおいてから、div要素に適用されてるstyleの数を数えて、hasClipPathという変数に代入してます。
ちゃんと数に入ってたら「対応している」ということでhasClipPathはtrueで、0だったらfalseになるって寸法です。

この変数を、以下のようにif文の条件として使います。これで、clip-pathプロパティに対応していなければ最初の{ }の中を実行して、対応していればelseの後の{ }の中を実行するようになるはずです:)。

if (!hasClipPath) {
	itemData[i].div.style.cssText = "clip: rect(" + top + "," + right + "," + btm + "," + left + ")";
} else {
	let clipPath = left + " " + top + "," + right + " " + top + "," + right + " " + btm + "," + left + " " + btm ;
	itemData[i].div.style.cssText = "-webkit-clip-path: polygon(" + clipPath + ")";
	itemData[i].div.style.cssText += "clip-path: polygon(" + clipPath + ")";
}

IE/Edgeではclipプロパティ、それ以外ではclip-pathプロパティだけが適用されるようになりましたね;)！

同じく、background-attachment: fixedに対応しているブラウザではCSSでパラパラして、未対応のブラウザだけJavaScriptを使ったパラパラにするようにしたいです。
clip-pathの時と同じ要領で、hasAttachmentという変数に、対応していればtrue、未対応ならfalseが代入されるようにします。

let div2 = document.createElement("div");
div2.style.cssText = "background-attachment: fixed";
var hasAttachment = div2.style.length > 0;

最初のDOMContentLoadedイベントのところを、if文を使って、以下のように書き直します。これで、background-attachment: fixedに未対応のブラウザのみ、{ }の中が実行されるようになるはずです！

document.addEventListener('DOMContentLoaded', function() {
	if (!hasAttachment) {
		items = scprElm.querySelectorAll("#scpr li");
		gatItemData();
		window.addEventListener("resize", onResize);
		window.addEventListener("scroll", onScroll);
	}
});

と思ったけれど、iPhoneもAndroidのChromeも、JavaScriptが動かなくなっちゃいました…。
どうやら、background-attachmentには対応してるからか、div2.style.lengthで数に入れられちゃったみたいです。
プロパティが“適用されているか/されていないか”で判別するのは諦めて、ここでは、ブラウザのユーザーエージェントで、明示的にブラウザを判別することにします！X‹

background-attachmentプロパティが効いてなかったのは、iOS Safari/Chromeと、Android Chrome（2019年1月現在）。つまり、iPhone全般と、Android（ただしChrome）という事として、以下のような条件で、振り分けることにします。

let ua = window.navigator.userAgent.toLowerCase(),
	isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1,
	isAndroid = ua.indexOf('android') != -1 && ua.indexOf('chrome') != -1;

このisIosとisAndroidを条件に、以下のように書けば、iOSの時、もしくはAndroidでChromeの時だけ{ }の中を実行するはずです！

document.addEventListener('DOMContentLoaded', function() {
	if (isIos || isAndroid) {
		items = scprElm.querySelectorAll("#scpr li");
		gatItemData();
		window.addEventListener("resize", onResize);
		window.addEventListener("scroll", onScroll);
	}
});

うん、ちゃんとJavaScriptが動くようになりました;D。

ユーザーエージェントについては以下の記事を参照のこと。
User Agentを用いたブラウザーの判定 | MDN

※上記のページにも喚起されているように、ユーザーエージェントを用いたブラウザの判別は、なるべく回避しなきゃいけないこと…。よりよい方法が見つかったら、追記するかもですX(！

ここで気付いたのですけれど、IE/Edgeはbackground-attachmentプロパティに対応しているのだから、clipプロパティ使わなくても大丈夫でしたね…Xp。
てなもんで、以上、「スクロールパラパラ」について、でした！最後まで読んでいただきありがとうございました:D。