document.querySelector('.debug').innerHTML = `${document.body.clientWidth}x${document.body.clientHeight}`;
/**
* Картинка, перекрывающая текст
* @type {Element}
*/
const image = document.querySelector('.image');
/**
* Слой, делающий картинку прозрачной
* @type {Element}
*/
const overlay = document.querySelector('.overlay');
const sourceRatio = 1.5;
/**
* Карта вычисления периметра rectA - rectB
* @type {Map(Number:BigInt)}
*/
const minusMap = new Map([
[0x8787, 0n], [0x2d2d,0x8bfea8451an],
[0x2d8d, 0x8bfc4518n], [0x272d, 0x46ab7518n],
[0x872d, 0x46237518n], [0x2d27, 0x45dea918n],
[0x2d87, 0x45dc8918n], [0x8d2d, 0x4513fe28n],
[0x8d8d, 0x3fc4516n], [0x278d, 0x8b7516n],
[0x2727, 0x46a916n], [0x8d27, 0x45de26n],
[0x8d87, 0xc45d4n], [0x878d, 0x37514n],
[0x8727, 0x4624n], [0x2787, 0x8914n],
]);
/**
* Сортировщик отступов точек
*/
const sorter = array => array.sort(([a],[b])=>Math.sign(a-b)).map(([,a])=>a).join('');
/**
* Функция возвращает левый и верхний отступы и ширину и высоту элемента
* @param
*/
const offset = el => [el.offsetLeft,el.offsetTop,el.offsetWidth,el.offsetHeight];
/* Включение обработчиков */
[ ['mousemove',onmousemove],
['mouseenter',onmouseenter],
['mouseleave',onmouseleave],
['resize',onresize],
].forEach(([evt,fn])=>window.addEventListener(evt,fn,false));
/* Вызов первоначального обрезания фона перекрывающей картинки */
recalculateSize();
function onmousemove(e){
let [left,top]=[(e.pageX-108)+'px', (e.pageY-50)+'px'];
Object.assign(overlay.style,{left,top});
recalculateClip();
}
function onresize(e){
recalculateSize();
}
function recalculateSize(){
let imageWidth,backgroundPositionX,backgroundPositionY;
if(image.clientWidth/image.clientHeight > sourceRatio){
imageWidth = Math.round(image.clientWidth);
backgroundPositionX = 0;
backgroundPositionY = (image.clientHeight/2 - image.clientWidth/3)+'px';
} else {
imageWidth = Math.round(image.clientHeight * 1.5);
backgroundPositionX = (image.clientWidth/3 - image.clientHeight/2)+'px';
backgroundPositionY = 0;
}
let backgroundImage = `url("https://unsplash.com/photos/dnEiAHM7MlQ/download?force=true&w=${imageWidth}")`;
Object.assign(image.style,{backgroundImage,backgroundPositionX,backgroundPositionY});
Object.assign(overlay.style,{backgroundImage});
recalculateClip();
}
/**
* Функция пересчитывает обрезку фона картинки
*/
function recalculateClip(){
/* Габариты элементов image и overlay */
let [[ix,iy,iw,ih],[ox,oy,ow,oh]] = [offset(image),offset(overlay)];
/* Это костыль решает проблему из-за строчки CSS translate(-50%,-50%) */
[ ix, iy ] = [ix - ~~(iw/2),iy - ~~(ih/2)];
let [il,it] = iw/ih > sourceRatio ? [0,ih/2-iw/3]:[iw/3-ih/2,0];
/* Собираем clipPath из полигона с точками */
image.style.clipPath = `polygon(${
/* Здесь вычисляются точки периметра получаемого из image - overlay
полигона */
rectA_minus_rectB(ix,iy,ix+iw,iy+ih,ox,oy,ox+ow,oy+oh)
/* далее из абсолютных координат путем вычитания получаем координаты
относительно верхней левой точки image */
.map(([cx,cy])=>`${cx-ix}px ${cy-iy}px`).join(',')
})`;
const {max,min} = Math;
let [xx,xy,xr,xb] = [max(ix,ox),max(iy,oy),min(ix+iw,ox+ow),min(iy+ih,oy+oh)]
Object.assign(overlay.style,{
backgroundPositionX:(ix-ox+il)+'px',
backgroundPositionY:(iy-oy+it)+'px',
clipPath: `polygon(${xx-ox}px ${xy-oy}px,${xr-ox}px ${xy-oy}px,${xr-ox}px ${xb-oy}px,${xx-ox}px ${xb-oy}px,${xx-ox}px ${xy-oy}px)`
});
}
/** Функция расчета периметра rectA - rectB
*
* Функция потребляет 8 параметров: по 4 параметра на каждый rect.
* Функция требует абсолютных значений на плоскости.
* Функция возвращает список точек с абсолютными координатами.
*
* @param al {Number} Левая граница rectA
* @param at {Number} Верхняя граница rectA
* @param ar {Number} Правая граница rectA
* @param ab {Number} Нижняя граница rectA
* @param bl {Number} Левая граница rectB
* @param bt {Number} Верхняя граница rectB
* @param br {Number} Правая граница rectB
* @param bb {Number} Нижняя граница rectB
* @returns {Array([Number x,Number y])}
*/
function rectA_minus_rectB(al,at,ar,ab,bl,bt,br,bb){
/* Начальный периметр rectA */
const rectApts = [[al,at],[ar,at],[ar,ab],[al,ab]];
/* Если два rect не пересекаются или rectB имеет нулевые размеры */
if(br<al || ar<bl || bb<at || ab<bt || br==bl || bb==bt)
/* то возвращаем точки начального периметра rectA */
return rectApts;
/* Отсортируем точки периметров и сложим их как число из 8 цифр
от 0 до 3 в два байта */
const p = parseInt(sorter([[al,0],[ar,1],[bl,2],[br,3]])+
sorter([[at,0],[ab,1],[bt,2],[bb,3]]),4);
/* Из карты разницы rect получим закодированные точки периметра rectA - rectB */
let ptsb = minusMap.get(p);
/* Если не нашли вариант, то снова возвращаем точки начального периметра rectA */
if(undefined == ptsb) return rectApts;
/* Первым параметром, занимающим 4 бита, будет количество точек */
let ptcnt = Number(ptsb & 15n), pts = new Array(ptcnt+1);
/* Далее каждые 4 бита будут ссылаться на координаты точки: по 2 бита на каждую ось */
/* Заполняем массив точек из координат */
for(let i = 0; ptsb >>= 4n, i < ptcnt; i++)
/* значения координат в левой части - порядок координат извлекаем
из того же числа из карты разницы rect */
pts[i] = [[al,ar,bl,br][Number(ptsb >> 2n & 3n)],
[at,ab,bt,bb][Number(ptsb & 3n)] ];
/* Добавим начальную току в конец списка точек или верхнюю левую точку rectA
в случае если точки отсутствуют (то есть rectB перекрывает rectA) */
pts[ptcnt] = ptcnt ? [...pts[0]] : [ al, at ];
return pts;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: blue; overflow: hidden; height: 100vh; width: 100vw; }
.debug {left:0;top:0;position:absolute; color: #fff; text-shadow: #000;}
.centered { position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); }
.image { z-index: 1; width: 60vw; height: 60vh; background-repeat: no-repeat;}
.overlay { width: 216px; height: 100px;
z-index:2;
top: calc(50vh - 50px);
left: calc(50vw - 108px);
background-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='216'%20height='100'%3E%3Crect%20x1='0'%20y1='0'%20x2='216'%20y2='100'/%3E%3Cpath%20d='m0,0v100h217v-100h-217zm50,0a50,50,0,0,1,43.5,25,30,50,0,0,0,30,0,50,50,0,1,1,0,50,30,50,0,0,0-30,0,50,50,0,1,1-43.5-75zm0,20a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30zm117,0a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30z'%20fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='216'%20height='100'%3E%3Crect%20x1='0'%20y1='0'%20x2='216'%20y2='100'/%3E%3Cpath%20d='m0,0v100h217v-100h-217zm50,0a50,50,0,0,1,43.5,25,30,50,0,0,0,30,0,50,50,0,1,1,0,50,30,50,0,0,0-30,0,50,50,0,1,1-43.5-75zm0,20a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30zm117,0a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30z'%20fill='%23000'/%3E%3C/svg%3E");
mask: url(#mask);
mask-type: luminance;
position: absolute;
transform: scale(1.01); }
p { width: 85%; color: yellow; user-select: none; pointer-events: none; }
<mask id="mask">
<path d="m0,0v100h216v-100h-216zm50,0a50,50,0,0,1,43.5,25,30,50,0,0,0,30,0,50,50,0,1,1,0,50,30,50,0,0,0-30,0,50,50,0,1,1-43.5-75zm0,20a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30zm117,0a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30z" fill="#000"/>
</mask>
<div class="debug"></div>
<div class="image centered"></div>
<p class="centered">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
</p>
</div>
<div class="overlay"></div>