jQueryを使用してスライダー形式のビフォーアフターモーションを実装する

ホームページ上にビフォーアフターの画像を掲載する場合に、同じ画角の画像を対比させて表示し、画像上のスライダーを動かすことで変化を表現しているものがありましたので、実装方法をメモ

HTML

<div class="ba-container">
	<img src="○○.jpg" alt="Before">
	<div class="ba-overlay"><img src="△△.jpg" alt="After"></div>
	<div class="ba-slider"></div>
</div>

CSS

.ba-container {
	position: relative;
	width: 900px;
	height: 600px;
	margin: 0 auto;
	overflow: hidden;
	user-select: none;
}
.ba-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ba-overlay {
	position: absolute;
	width: 50%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
}
.ba-slider {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4px;
	height: 100%;
	background: #fff;
	cursor: ew-resize;
	z-index: 10;
	transform: translateX(-50%);
}
@media screen and (max-width: 980px) {
	.ba-container { width: 100%; height: 300px; }
}

jQuery

$(function(){
	var $container = $('.ba-container');
	var $overlay = $('.ba-overlay');
	var $slider = $('.ba-slider');
	var dragging = false;

	// 画像幅をコンテナに合わせる
	$overlay.find('img').css({'width': $container.width() + 'px'});

	// スマホ用タッチイベント
	if($(window).width() < 980){
		$container.on('touchstart', function(e){
			dragging = true;
		});

		$container.on('touchend touchcancel', function(e){
			dragging = false;
		});

		$container.on('touchmove', function(e){
			if(!dragging) return;
			var touch = e.originalEvent.touches[0];
			moveSlider(touch.pageX);
			e.preventDefault(); // 画面スクロール防止
		});
	}else{

		$slider.on('mousedown', function(e){
			if($(window).width() >= 980){
				dragging = true;
			}
		});
	
		$(document).on('mouseup', function(){
			dragging = false;
		});
	
		$(document).on('mousemove', function(e){
			if(!dragging) return;
			moveSlider(e.pageX);
		});
	

	}

	function moveSlider(pageX){
		var offset = $container.offset();
		var relativeX = pageX - offset.left;
		if(relativeX < 0) relativeX = 0;
		if(relativeX > $container.width()) relativeX = $container.width();
		$overlay.width(relativeX);
		$slider.css('left', relativeX);
	}

});

ビフォーアフターの2枚の画像を重ねて配置。
上側の画像の表示領域（幅）を変化させることで、画像が切り替わっているように見せています。

SAMPLE

サンプルでは同じ画像を使用し、元画像をグレースケールにすることで切り替わるの様子が分かるようjにしています。