[HTML]
<style>
div.crawlimage01 {
	padding-block: 30px;
	> div {
		display: grid;
		grid-template-columns: repeat(5,30vw);
		column-gap: 10px;
		@media (width < 900px) {
			grid-template-columns: repeat(5,60vw);
		}
		> img {
			width: 100%;
		}
	}
}
div.crawlimage02 {
	padding-block: 30px;
	> div {
		display: grid;
		grid-template-columns: repeat(10,30vw);
		column-gap: 10px;
		@media (width < 900px) {
			grid-template-columns: repeat(10,60vw);
		}
		> img {
			width: 100%;
		}
	}
}
div.crawlimage03 {
	padding-block: 30px;
	> div {
		display: grid;
		grid-template-columns: repeat(10,20vw);
		column-gap: 10px;
		@media (width < 900px) {
			grid-template-columns: repeat(10,40vw);
		}
		> img {
			width: 100%;
		}
	}
}
</style>
<div class="crawlimage01">
	<div>
		<img src="./image/crawl01.webp">
		<img src="./image/crawl02.webp">
		<img src="./image/crawl03.webp">
		<img src="./image/crawl04.webp">
		<img src="./image/crawl05.webp">
	</div>
</div>
<div class="crawlimage02">
	<div>
		<img src="./image/crawl01.webp">
		<img src="./image/crawl02.webp">
		<img src="./image/crawl03.webp">
		<img src="./image/crawl04.webp">
		<img src="./image/crawl05.webp">
		<img src="./image/crawl01.webp">
		<img src="./image/crawl02.webp">
		<img src="./image/crawl03.webp">
		<img src="./image/crawl04.webp">
		<img src="./image/crawl05.webp">
	</div>
</div>
<div class="crawlimage03">
	<div>
		<img src="./image/crawl01.webp">
		<img src="./image/crawl02.webp">
		<img src="./image/crawl03.webp">
		<img src="./image/crawl04.webp">
		<img src="./image/crawl05.webp">
		<img src="./image/crawl01.webp">
		<img src="./image/crawl02.webp">
		<img src="./image/crawl03.webp">
		<img src="./image/crawl04.webp">
		<img src="./image/crawl05.webp">
	</div>
</div>
<script defer src="./js/crawlimage.js"></script>
		

(() => {
	class CrawlImage {
		#stage;
		constructor(stage) {
			this.#stage = stage;
			this.#init();
		}
		#init() {
			window.addEventListener('scroll', () => {
				const windowHeight = window.innerHeight;
				const stageWidth = this.#stage.scrollWidth;
				const maxScroll = windowHeight + this.#stage.scrollHeight;
				const maxCrawl = stageWidth - window.innerWidth;
				const stageTop = this.#getElementPositionRelativeToBody(this.#stage);
				const stageScrollPosition = window.scrollY - stageTop + windowHeight;
				const movement = -(maxCrawl / maxScroll) * stageScrollPosition;
				this.#stage.style.transform = 'translateX(' + movement + 'px)';
			});
		}
		#getElementPositionRelativeToBody(element) {
			let top = 0;
			let currentElement = element;
			while (currentElement !== document.body) {
				top += currentElement.offsetTop;
				currentElement = currentElement.offsetParent;
			}
			return top;
		}
	}
	new CrawlImage(document.querySelector('div.crawlimage01 > div'));
	new CrawlImage(document.querySelector('div.crawlimage02 > div'));
	new CrawlImage(document.querySelector('div.crawlimage03 > div'));
})();