Я хотел бы инвертировать черный текст, зависая его с помощью специального -черного курсора. Этот GIF демонстрирует эффект:
Не удалось обернуть мою голову, чтобы выполнить эту работу с помощью CSS & JS. Некоторая комбинация с mix-blend-режимами, обтравочными масками, псевдоэлементами и фильтрами, я думаю.
Следующий код делает курсор белым, но не оставляет черный текст белым. Звучит абстрактно? Вот демо.
mix-blend-mode: difference;
filter: invert(1) grayscale(1) contrast(2);
Я настраивал игровую площадку на Codepen, чтобы побеседовать с ней, но пока не нашел решения.
Как этот эффект зависания можно воссоздать с помощью CSS и Javascript?
Вот идея, использующая clip-path
. Трюк состоит в том, чтобы дублировать текст, чтобы иметь два слоя друг над другом с другим цветом текста, затем я раскрываю верхнюю часть, используя clip-path
который я настраиваю с перемещением мыши.
var h =document.querySelector('h1');
var p= h.getBoundingClientRect();
var c= document.querySelector('.cursor');
document.body.onmousemove = function(e) {
/*Adjust the cursor position*/
c.style.left=e.clientX-20+'px';
c.style.top=e.clientY-20+'px';
/*Adjust the clip-path*/
h.style.setProperty('--x',(e.clientX-p.top)+'px');
h.style.setProperty('--y',(e.clientY-p.left)+'px');
}
body {
cursor:none;
}
h1 {
color: #000;
display:inline-block;
margin:50px;
text-align: center;
position:relative;
}
h1:before {
position:absolute;
content:attr(data-text);
color:#fff;
background:#000;
clip-path: circle(20px at var(--x,-40px) var(--y,-40px));
}
.cursor {
position:absolute;
width:40px;
height:40px;
background:#000;
border-radius:50%;
top:-40px;
left:-40px;
z-index:-2;
}
<h1 data-text="WORK">WORK</h1>
<span class="cursor"></span>
Вот еще одна идея с использованием radial-gradient
и без дублирования текста:
var h =document.querySelector('h1');
var p= h.getBoundingClientRect();
var c= document.querySelector('.cursor');
document.body.onmousemove = function(e) {
/*Adjust the position of the cursor*/
c.style.left=e.clientX-20+'px';
c.style.top=e.clientY-20+'px';
/*Adjust the radial-gradient*/
h.style.setProperty('--x',(e.clientX-p.top)+'px');
h.style.setProperty('--y',(e.clientY-p.left)+'px');
}
body {
cursor:none;
}
h1 {
display:inline-block;
margin:50px;
background: radial-gradient(circle at var(--x,-40px) var(--y,-40px), #fff 20px,black 21px);
background-clip: text;
-webkit-background-clip: text;
color:transparent;
-webkit-text-fill-color: transparent;
}
.cursor {
position:absolute;
width:40px;
height:40px;
background:#000;
border-radius:50%;
top:-40px;
left:-40px;
z-index:-2;
}
<h1>WORK</h1>
<span class="cursor"></span>
Вот третий метод, который полагается на более поддерживаемые методы, чем clip-path
и/или background-clip:text
:
var h =document.querySelector('h1.title');
var p= h.getBoundingClientRect();
var c= document.querySelector('.cursor');
document.querySelector('.cursor h1').style.left=p.left+'px';
document.querySelector('.cursor h1').style.top=p.top+'px';
document.body.onmousemove = function(e) {
/*Adjust the position of the cursor*/
c.style.left=e.clientX-20+'px';
c.style.top=e.clientY-20+'px';
}
body {
cursor:none;
margin:0;
}
h1.title {
display:inline-block;
margin:50px;
}
.cursor {
position:absolute;
width:40px;
height:40px;
background:#000;
border-radius:50%;
top:-40px;
left:-40px;
z-index:2;
overflow:hidden;
}
.cursor > * {
position:fixed;
color:#fff;
margin:0;
}
<h1 class="title">WORK</h1>
<div class="cursor">
<h1>WORK</h1>
</div>
Я сделал приведенный выше пример простым, но мы можем добавить больше JS, чтобы дублировать текст и помещать внутри курсора и иметь что-то более гибкое.