Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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
Добрый день, а как сделать такой эффект для изображений которые вставляются через background-image?
А какая в этом необходимость?
Тут вторая фотка задается через SVG и она должна наложиться 1 в 1 на первую.
Если первую ставить через background-image, то нужно будет задавать блоку размеры, а это повлечет ряд других проблем.
глупый наверное вопрос, но как сделать на одной странице, две или три таких фото? при простом копирование, при наведение на первое фото, на втором также начинается круг водится( пытался даже переименовывать наименование классов, но не помогло(
Попробуйте: Тест
Обратите внимание на ID масок в clipPath