Рентгеновские лучи на JS

Пример:

HTML:

<div class="svg-wr">
	<img src="/path/photo-1.jpg" />	
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
		<defs>
			<clipPath id="mask">
				<circle id="mask-circle" cx="50%" cy="50%" r="12%" style="fill: #ffffff"/>
			</clipPath>
		</defs>
		<g clip-path="url(#mask)">
			<image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="/path/photo-2.jpg" />
		</g>
		<circle id="circle-shadow" cx="50%" cy="50%" r="12%" style="stroke: #fff; fill: transparent; stroke-width: 5;" />
	</svg>
</div>

<defs>

</clipPath>

</defs>

</g>

</svg>

</div>

CSS:

.svg-wr {
	position: relative; 
	margin: 20px 0;
}
.svg-wr img,
.svg-wr image {
	width: 100%;
}
.svg-wr svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%; 
}

.svg-wr {

position: relative;

margin: 20px 0;

}

.svg-wr img,

.svg-wr image {

width: 100%;

}

.svg-wr svg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

JS:

let svgWR = document.querySelector('.svg-wr');
let svgElement = document.querySelector('.svg-wr svg');
let imageElement = document.querySelector('.svg-wr image');
let maskedElement = document.querySelector('#mask-circle');
let circleFeedback = document.querySelector('#circle-shadow');
let svgPoint = svgElement.createSVGPoint();
function cursorPoint(e, svg) {
    svgPoint.x = e.clientX;
    svgPoint.y = e.clientY;
    return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
}
function update(svgCoords) {
    maskedElement.setAttribute('cx', svgCoords.x);
    maskedElement.setAttribute('cy', svgCoords.y);
    circleFeedback.setAttribute('cx', svgCoords.x);
    circleFeedback.setAttribute('cy', svgCoords.y);
}
window.addEventListener('resize', function() {
	imageElement.style.width = svgWR.offsetWidth; 
	imageElement.style.height = svgWR.offsetHeight;
});
window.addEventListener('mousemove', function(e) {
	update(cursorPoint(e, svgElement));
}, false);
document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    let touch = e.targetTouches[0];
    if (touch) {
        update(cursorPoint(touch, svgElement));
	}
}, false);

let svgWR = document.querySelector('.svg-wr');

let svgElement = document.querySelector('.svg-wr svg');

let imageElement = document.querySelector('.svg-wr image');

let maskedElement = document.querySelector('#mask-circle');

let circleFeedback = document.querySelector('#circle-shadow');

let svgPoint = svgElement.createSVGPoint();

function cursorPoint(e, svg) {

svgPoint.x = e.clientX;

svgPoint.y = e.clientY;

return svgPoint.matrixTransform(svg.getScreenCTM().inverse());

}

function update(svgCoords) {

maskedElement.setAttribute('cx', svgCoords.x);

maskedElement.setAttribute('cy', svgCoords.y);

circleFeedback.setAttribute('cx', svgCoords.x);

circleFeedback.setAttribute('cy', svgCoords.y);

}

window.addEventListener('resize', function() {

imageElement.style.width = svgWR.offsetWidth;

imageElement.style.height = svgWR.offsetHeight;

});

window.addEventListener('mousemove', function(e) {

update(cursorPoint(e, svgElement));

}, false);

document.addEventListener('touchmove', function(e) {

e.preventDefault();

let touch = e.targetTouches[0];

if (touch) {

update(cursorPoint(touch, svgElement));

}

}, false);

За основу взят код, найденный на codepen.io у пользователя Noel Delgado
Автор фотографий LeeRosario

Александр: 05.07.2021 в 00:21

Добрый день, а как сделать такой эффект для изображений которые вставляются через background-image?

Ответить
- Alexander: 05.07.2021 в 08:09
  
  А какая в этом необходимость?
  Тут вторая фотка задается через SVG и она должна наложиться 1 в 1 на первую.
  Если первую ставить через background-image, то нужно будет задавать блоку размеры, а это повлечет ряд других проблем.
  
  Ответить
Дмитрий: 09.04.2021 в 21:40

глупый наверное вопрос, но как сделать на одной странице, две или три таких фото? при простом копирование, при наведение на первое фото, на втором также начинается круг водится( пытался даже переименовывать наименование классов, но не помогло(

Ответить
- Alexander: 10.04.2021 в 12:09
  
  Попробуйте: Тест
  Обратите внимание на ID масок в clipPath
  
  Ответить

Пример:

HTML:

CSS:

JS:

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

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

Комментарии: