CSSとJSで作る、スクロール操作でおしゃれに写真とタイトルが切り替わるスライダー

const throttle = (callback, limit) => {
	let waiting = false;
	return function() {
		if (!waiting) {
			callback.apply(this, arguments);
			waiting = true;
			setTimeout(() => {
				waiting = false;
			}, limit);
		}
	};
};
const debounce = (func, wait) => {
	let timeout;
	return function() {
		clearTimeout(timeout);
		timeout = setTimeout(() => func.apply(this, arguments), wait);
	};
};
const SLIDES = [{
	en: "FJORD",
	jp: "朝霧の森",
	color: "#2D3E33",
	image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1200&q=80"
}, {
	en: "AETHER",
	jp: "静謐な湖畔",
	color: "#3E4A59",
	image: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200&q=80"
}, {
	en: "ONYX",
	jp: "光の建築",
	color: "#424852",
	image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1200&q=80"
}, {
	en: "BIRCH",
	jp: "悠久の刻",
	color: "#4A3B3B",
	image: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200&q=80"
}];
const AUTOPLAY_DELAY = 5000;
class Slider {
	constructor() {
		this.current = 0;
		this.animating = false;
		this.total = SLIDES.length;
		this.el = document.querySelector(".kumonosu-slider");
		this.titleEl = document.querySelector(".kumonosu-title");
		this.imagesEl = document.querySelector(".kumonosu-images");
		this.slideEls = [];
		this.currentLine = null;
		this.autoPlayId = null;
		this.reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
		this.init();
	}
	init() {
		this.preload();
		this.createTitleElement(this.current, true);
		gsap.set(this.el, {
			backgroundColor: SLIDES[0].color
		});
		this.buildCarousel();
		this.bind();
		this.startAutoPlay();
	}
	preload() {
		SLIDES.forEach(s => {
			new Image().src = s.image;
		});
	}
	mod(n) {
		return ((n % this.total) + this.total) % this.total;
	}
	startAutoPlay() {
		this.stopAutoPlay();
		this.autoPlayId = setInterval(() => {
			if (!this.animating) this.go("next");
		}, AUTOPLAY_DELAY);
	}
	stopAutoPlay() {
		if (this.autoPlayId) {
			clearInterval(this.autoPlayId);
			this.autoPlayId = null;
		}
	}
	createTitleElement(idx, setInitial = false) {
		const line = document.createElement("div");
		line.className = "kumonosu-title-line";
		const main = document.createElement("div");
		main.className = "kumonosu-title-main";
		[...SLIDES[idx].en].forEach(ch => {
			const span = document.createElement("span");
			span.textContent = ch === " " ? "\u00A0" : ch;
			main.appendChild(span);
		});
		const sub = document.createElement("div");
		sub.className = "kumonosu-title-sub";
		[...SLIDES[idx].jp].forEach(ch => {
			const span = document.createElement("span");
			span.textContent = ch === " " ? "\u00A0" : ch;
			sub.appendChild(span);
		});
		line.appendChild(main);
		line.appendChild(sub);
		if (setInitial) {
			this.titleEl.appendChild(line);
			this.currentLine = line;
		}
		return line;
	}
	animateTitle(nextIdx, direction) {
		const h = this.titleEl.offsetHeight || 100;
		const dir = direction === "next" ? 1 : -1;
		const oldLine = this.currentLine;
		const oldChars = [...oldLine.querySelectorAll("span")];
		const newLine = this.createTitleElement(nextIdx);
		newLine.style.cssText = "position:absolute;top:0;left:0;width:100%";
		this.titleEl.appendChild(newLine);
		const newChars = [...newLine.querySelectorAll("span")];
		gsap.set(newChars, {
			y: h * dir
		});
		const tl = gsap.timeline({
			onComplete: () => {
				oldLine.remove();
				newLine.style.cssText = "";
				gsap.set(newChars, {
					clearProps: "all"
				});
				this.currentLine = newLine;
			}
		});
		const duration = this.reducedMotion ? 0.01 : 1.2;
		const stagger = this.reducedMotion ? 0 : 0.03;
		tl.to(oldChars, {
			y: -h * dir,
			stagger,
			duration,
			ease: "expo.inOut"
		}, 0);
		tl.to(newChars, {
			y: 0,
			stagger,
			duration,
			ease: "expo.inOut"
		}, 0);
		return tl;
	}
	makeSlide(idx) {
		const div = document.createElement("div");
		div.className = "kumonosu-slide";
		const img = document.createElement("img");
		img.src = SLIDES[idx].image;
		img.alt = SLIDES[idx].en;
		div.appendChild(img);
		return div;
	}
	getSlideProps(step) {
		const h = this.imagesEl.offsetHeight;
		const absStep = Math.abs(step);
		const positions = [{
			x: -0.15,
			y: -0.85,
			rot: -20,
			s: 1.3,
			b: 15,
			o: 0
		}, {
			x: -0.08,
			y: -0.45,
			rot: -10,
			s: 1.1,
			b: 6,
			o: 0.6
		}, {
			x: 0,
			y: 0,
			rot: 0,
			s: 1,
			b: 0,
			o: 1
		}, {
			x: 0.04,
			y: 0.45,
			rot: 10,
			s: 0.8,
			b: 6,
			o: 0.6
		}, {
			x: 0.08,
			y: 0.85,
			rot: 20,
			s: 0.6,
			b: 15,
			o: 0
		}];
		const idx = Math.max(0, Math.min(4, step + 2));
		const p = positions[idx];
		return {
			x: p.x * h,
			y: p.y * h,
			rotation: p.rot,
			scale: p.s,
			blur: p.b,
			opacity: p.o,
			zIndex: absStep === 0 ? 3 : absStep === 1 ? 2 : 1
		};
	}
	positionSlide(slide, step) {
		const props = this.getSlideProps(step);
		gsap.set(slide, {
			xPercent: -50,
			yPercent: -50,
			x: props.x,
			y: props.y,
			rotation: props.rotation,
			scale: props.scale,
			opacity: props.opacity,
			filter: `blur(${props.blur}px)`,
			zIndex: props.zIndex
		});
	}
	buildCarousel() {
		if (!this.imagesEl || this.imagesEl.offsetHeight === 0) return;
		this.imagesEl.innerHTML = "";
		this.slideEls = [];
		for (let step = -1; step <= 1; step++) {
			const idx = this.mod(this.current + step);
			const slide = this.makeSlide(idx);
			this.imagesEl.appendChild(slide);
			this.positionSlide(slide, step);
			this.slideEls.push({
				el: slide,
				step
			});
		}
	}
	animateCarousel(direction) {
		const shift = direction === "next" ? -1 : 1;
		const enterStep = direction === "next" ? 2 : -2;
		const newIdx = direction === "next" ? this.mod(this.current + 2) : this.mod(this.current - 2);
		const newSlide = this.makeSlide(newIdx);
		this.imagesEl.appendChild(newSlide);
		this.positionSlide(newSlide, enterStep);
		this.slideEls.push({
			el: newSlide,
			step: enterStep
		});
		this.slideEls.forEach(s => {
			s.step += shift;
		});
		const tl = gsap.timeline({
			onComplete: () => {
				this.slideEls = this.slideEls.filter(s => {
					if (Math.abs(s.step) >= 2) {
						s.el.remove();
						return false;
					}
					return true;
				});
			}
		});
		const duration = this.reducedMotion ? 0.01 : 1.4;
		this.slideEls.forEach(s => {
			const props = this.getSlideProps(s.step);
			s.el.style.zIndex = props.zIndex;
			tl.to(s.el, {
				x: props.x,
				y: props.y,
				rotation: props.rotation,
				scale: props.scale,
				opacity: props.opacity,
				filter: `blur(${props.blur}px)`,
				duration,
				ease: "expo.inOut"
			}, 0);
		});
		return tl;
	}
	go(direction) {
		if (this.animating) return;
		this.animating = true;
		this.startAutoPlay();
		const nextIdx = direction === "next" ? this.mod(this.current + 1) : this.mod(this.current - 1);
		const master = gsap.timeline({
			onComplete: () => {
				this.current = nextIdx;
				this.animating = false;
			}
		});
		master.to(this.el, {
			backgroundColor: SLIDES[nextIdx].color,
			duration: this.reducedMotion ? 0.01 : 1.4,
			ease: "power2.inOut"
		}, 0);
		master.add(this.animateTitle(nextIdx, direction), 0);
		master.add(this.animateCarousel(direction), 0);
	}
	bind() {
		window.addEventListener("wheel", throttle((e) => {
			if (Math.abs(e.deltaY) < 10) return;
			if (!this.animating) this.go(e.deltaY > 0 ? "next" : "prev");
		}, 1500), {
			passive: true
		});
		let touchStartY = 0;
		window.addEventListener("touchstart", (e) => {
			touchStartY = e.touches[0].clientY;
		}, {
			passive: true
		});
		window.addEventListener("touchend", throttle((e) => {
			const diff = touchStartY - e.changedTouches[0].clientY;
			if (!this.animating && Math.abs(diff) > 40) this.go(diff > 0 ? "next" : "prev");
		}, 1500), {
			passive: true
		});
		window.addEventListener("keydown", (e) => {
			if (this.animating) return;
			if (["ArrowDown", "ArrowRight"].includes(e.key)) this.go("next");
			if (["ArrowUp", "ArrowLeft"].includes(e.key)) this.go("prev");
		});
		window.addEventListener("resize", debounce(() => {
			if (!this.animating) {
				this.slideEls.forEach(s => this.positionSlide(s.el, s.step));
			}
		}, 200));
		document.addEventListener("visibilitychange", () => {
			document.visibilityState === "hidden" ? this.stopAutoPlay() : this.startAutoPlay();
		});
	}
}
document.addEventListener("DOMContentLoaded", () => {
	new Slider();
});