Слайдер для смены двух фотографий

Ранее уже были похожие слайдеры:

Этот вариант не требует никаких библиотек и умещается в несколько строчек

Пример:

HTML:

<div class="banner-wrapper" id="banner-wrapper">
	<div class="banner-layer banner-base">
		<img src="photo-1.webp" alt="">
	</div>
	<div class="banner-layer banner-dev" id="banner-dev">
		<img src="photo-2.webp" alt="">
	</div>
</div>

</div>

</div>

CSS:

.banner-wrapper {
	position: relative;
	overflow: hidden;
	height: 500px;
	margin: 20px 0;
	cursor: crosshair;
	background: #000;
}
.banner-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.banner-layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.banner-dev {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	will-change: clip-path;
	filter: brightness(1.05) contrast(1.05);
}

.banner-wrapper {

position: relative;

overflow: hidden;

height: 500px;

margin: 20px 0;

cursor: crosshair;

background: #000;

}

.banner-layer {

position: absolute;

inset: 0;

overflow: hidden;

}

.banner-layer img {

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

display: block;

}

.banner-dev {

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

will-change: clip-path;

filter: brightness(1.05) contrast(1.05);

}

JS:

document.addEventListener('DOMContentLoaded', () => {
	const wrapper = document.getElementById('banner-wrapper');
	const dev = document.getElementById('banner-dev');
	let target = 0.5;
	let current = 0.5;
	const ease = 0.12;
	const skew = 0.15; // насколько скошен край (доля ширины)
	function setClip(ratio) {
		// ratio: 0..1 — где граница по X
		// скошенный край: верхняя точка правее, нижняя левее (или наоборот)
		const topX = Math.min(1, Math.max(0, ratio + skew)) * 100;
		const botX = Math.min(1, Math.max(0, ratio - skew)) * 100;
		// верхний слой виден СПРАВА от границы
		dev.style.clipPath = `polygon(
		${topX}% 0,
		100% 0,
		100% 100%,
		${botX}% 100%
		)`;
	}
	function onMove(clientX) {
		const rect = wrapper.getBoundingClientRect();
		let ratio = (clientX - rect.left) / rect.width;
		ratio = Math.min(1, Math.max(0, ratio));
		target = ratio;
	}
	wrapper.addEventListener('mousemove', (e) => onMove(e.clientX));
	wrapper.addEventListener('touchmove', (e) => {
		if (e.touches[0]) onMove(e.touches[0].clientX);
	}, { passive: true });
//	wrapper.addEventListener('mouseleave', () => { target = 0.5; });
	function animate() {
		current += (target - current) * ease;
		if (Math.abs(target - current) < 0.0005) current = target;
		setClip(current);
		requestAnimationFrame(animate);
	}
	setClip(current);
	animate();
});

document.addEventListener('DOMContentLoaded', () => {

const wrapper = document.getElementById('banner-wrapper');

const dev = document.getElementById('banner-dev');

let target = 0.5;

let current = 0.5;

const ease = 0.12;

const skew = 0.15; // насколько скошен край (доля ширины)

function setClip(ratio) {

// ratio: 0..1 — где граница по X

// скошенный край: верхняя точка правее, нижняя левее (или наоборот)

const topX = Math.min(1, Math.max(0, ratio + skew)) * 100;

const botX = Math.min(1, Math.max(0, ratio - skew)) * 100;

// верхний слой виден СПРАВА от границы

dev.style.clipPath = `polygon(

${topX}% 0,

100% 0,

100% 100%,

${botX}% 100%

)`;

}

function onMove(clientX) {

const rect = wrapper.getBoundingClientRect();

let ratio = (clientX - rect.left) / rect.width;

ratio = Math.min(1, Math.max(0, ratio));

target = ratio;

}

wrapper.addEventListener('mousemove', (e) => onMove(e.clientX));

wrapper.addEventListener('touchmove', (e) => {

if (e.touches[0]) onMove(e.touches[0].clientX);

}, { passive: true });

// wrapper.addEventListener('mouseleave', () => { target = 0.5; });

function animate() {

current += (target - current) * ease;

if (Math.abs(target - current) < 0.0005) current = target;

setClip(current);

requestAnimationFrame(animate);

}

setClip(current);

animate();

});

За основу взят код, найденный на codepen.io у пользователя Brett McCaffray

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: