3

Я хотел бы инвертировать черный текст при наведении на него специального курсора -black-. Этот GIF демонстрирует эффект:

введите сюда описание изображения

У меня не получилось сделать это с CSS и JS. Думаю возможно, должна быть какая-то комбинация с mix-blend-modes, clipping masks, псевдоэлементами и фильтрами.

Следующий код делает курсор белым, но не позволяет сделать черный текст белым. Звучит абстрактно?
Вот демо

// All creds go to https://murmure.me 👀

const cursor = $(".cursor"),
      body = $("body"),
      slider = $(".slider"),
      nav = $(".nav"),
      fail = $(".fail"),
      invert = $(".invert"),
      nav_open_menu = $(".navopen"),
      wwidth = $(window).width(),
      wheight = $(window).height(),
             
cursorMove = function() {
  var e, n;
  return (
    body.addClass("cursor-on"),
    cursor.css({
      transform: "matrix(1, 0, 0, 1, " + wwidth / 2 + ", " + wheight / 2 + ")"
    }),
    (e = wheight / 2),
    (n = 0.65 * wwidth / 2),
    n > e ? e : n,
    $(window).on("mousemove", function(e) {
      var n, t;
      if (
        ((window.x = e.clientX),
        (window.y = e.clientY),
        cursor.css({
          transform: "matrix(1, 0, 0, 1, " + x + ", " + y + ")"
        }),
        !nav.hasClass("overlay-visible"))
      )
        return (
          (n = Math.floor((x - 60) / 5)),
          (t = Math.floor((y - 60) / 5)),
          n < 20 && t < 20
            ? nav_open_menu.addClass("magnetize").css({
                transform: "scale(1.3) translate3d(" + n + "px, " + t + "px, 0)"
              })
            : nav_open_menu.removeClass("magnetize").attr("style", "")
        );
    })
  );
};
cursorBind = function() {
    var e, n, t;
    if (
      ((n = cursor.find("span")).removeClass("link external new"),
      (e = $(".focus")),
      (t = $(".slack")),
      $(window).on({
        mouseenter: function() {
          return n.removeClass("off");
        },
        mouseleave: function() {
          return n.addClass("off");
        }
      }),
      $("a, button, .cursor-link, .sort-listing th").on({
        mouseenter: function() {
          var e;
          return (
            (e = $(this).hasClass("external") ? "link external" : "link"),
            n.addClass(e)
          );
        },
        mouseleave: function() {
          return n.removeClass("link external");
        }
      }),
      $("h1").on({
        mouseenter: function() {
          var e;
          return (
            (e = $(this).hasClass("external") ? "invert external" : "invert"),
            n.addClass(e)
          );
        },
        mouseleave: function() {
          return n.removeClass("invert external");
        }
      }),
      e.length &&
        e.find("a").on({
          mouseenter: function() {
            return n.addClass("new");
          },
          mouseleave: function() {
            return n.removeClass("new");
          }
        }),
      slider.length &&
        slider.on({
          mouseenter: function() {
            var e;
            return (
              (e = $(this).hasClass("full") ? "click" : "drag"), n.addClass(e)
            );
          },
          mouseleave: function() {
            return n.removeClass("drag click");
          }
        }),
      t.length &&
        t.on({
          mouseenter: function() {
            return n.addClass("light");
          },
          mouseleave: function() {
            return n.removeClass("light");
          }
        }),
      fail.length)
    )
      return fail.on({
        mouseover: function() {
          return n.addClass("relol");
        },
        mouseleave: function() {
          return n.removeClass("relol");
        }
      });
  };

cursorMove();
cursorBind();
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-weight: 500;
  font-size: 9vw;
}
 

*, *:before, *:after {
     box-sizing: border-box;
}
 body {
     min-height: 100vh;
     background-color: #fff;
     color: #000;
     text-rendering: optimizelegibility;
     line-height: 1.5;
    /* System stack font-family mentioned by @wooorm */
     font-family: Roboto, -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Oxygen, Ubuntu, Cantarell, Open Sans, sans-serif;
}
 .cursor-on {
     cursor: none;
}
 .cursor-on * {
     cursor: none;
}
 .cursor-on .cursor {
     position: fixed;
     z-index: 10;
     pointer-events: none;
     top: -1rem;
     left: -1rem;
}
 .cursor-on .cursor > span {
     display: block;
     width: 2rem;
     height: 2rem;
     border-radius: 2rem;
     background: #f8e71c;
     transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
     transform: scale(1);
}
 .cursor-on .cursor > span.off {
     transform: scale(0);
}
 .cursor-on .cursor > span.link {
     transform: scale(1.5);
     background-color: #0000ed;
}
 .cursor-on .cursor > span.link.external:after {
     content: "↗";
     display: block;
     white-space: pre;
     color: #fff;
     font-weight: 100;
     font-size: 1rem;
     text-align: center;
     width: 100%;
     line-height: 1;
     padding-top: 0.6em;
}
 .cursor-on .cursor > span.light {
     background: #fff;
}
 .cursor-on .cursor > span.drag, .cursor-on .cursor > span.click, .cursor-on .cursor > span.relol, .cursor-on .cursor > span.new {
     transform: scale(2.5);
}
 .cursor-on .cursor > span.drag:after, .cursor-on .cursor > span.click:after, .cursor-on .cursor > span.relol:after, .cursor-on .cursor > span.new:after {
     display: block;
     content: "";
     white-space: pre;
     color: #fff;
     font-size: 5px;
     text-align: center;
     width: 100%;
     line-height: 1;
     padding-top: calc((2rem / 2) - 2.5px);
     color: #000;
}
 .cursor-on .cursor > span.drag:after {
     content: "play";
}
 .cursor-on .cursor > span.click:after {
     content: "click\A click";
}
 .cursor-on .cursor > span.relol:after {
     content: "click\A me";
     padding-top: calc((2rem / 2) - 5px);
}
 .cursor-on .cursor > span.new:after {
     content: "new\A new";
}
 .cursor-on:active .cursor > span {
     transform: scale(0.75);
}
 .cursor-on:active .cursor > span.link {
     transform: scale(1);
}
 .cursor-on:active .cursor > span.drag, .cursor-on:active .cursor > span.click, .cursor-on:active .cursor > span.relol, .cursor-on:active .cursor > span.new {
     transform: scale(2);
}
 .grid {
     background-color: #fff;
}
 .grid--column--item {
     background-color: #000;
}
 .grid--column.sticky .grid--column--item {
     border-color: #000;
}


.cursor-on .cursor > span {
     background: black;
}
 .cursor-on .cursor > span.invert {
     transform: scale(2.5);
     mix-blend-mode: difference;
     filter: invert(1) grayscale(1) contrast(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="invert">Work</h1>


<div class="cursor" >
  <span class="off"></span>
 </div>

mix-blend-mode: difference;
filter: invert(1) grayscale(1) contrast(2);

Как можно воссоздать этот эффект наведения с помощью CSS и Javascript?

Свободный перевод вопроса Invert text color on mouse hover от участника @danoszz.

1

2 ответа 2

4

Вот идея использования 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+'px';
  c.style.top=e.clientY+'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,-100%) var(--y,-100%));
}
.cursor {
  position:fixed;
  width:40px;
  height:40px;
  background:#000;
  border-radius:50%;
  top:0;
  left:0;
  transform:translate(-50%,-50%);
  z-index:-2;
}
<h1 data-text="WORK">WORK</h1>

<span class="cursor"></span>

Вот еще одна идея с использованием радиального градиента без дублирования текста. Это решение может работать с несколькими элементами одновременно:

document.body.onmousemove = function(e) {
  document.documentElement.style.setProperty('--x',(e.clientX)+'px');
  document.documentElement.style.setProperty('--y',(e.clientY)+'px');
}
body {
  cursor:none;
}

.mask {
  background: 
    radial-gradient(circle 20px 
                    at var(--x,0) var(--y,0), 
                    #fff 99%,black 100%) 
                    fixed;
  background-clip: text;
  -webkit-background-clip: text;
  color:transparent;
  -webkit-text-fill-color: transparent;
}
html::before {
  content:"";
  position:fixed;
  width:40px;
  height:40px;
  background:#000;
  border-radius:50%;
  top:var(--y,0);
  left:var(--x,0);
  transform:translate(-50%,-50%);
  z-index:-2;
}
<h1 class="mask">WORK</h1>
<p class="mask">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis risus sapien. Maecenas dui orci, blandit et commodo eget, egestas quis odio. Donec eu tortor turpis. Aliquam convallis et nisi ut varius. Proin sapien erat, auctor in efficitur vel, efficitur sit amet justo. In pretium iaculis tempus. Vivamus congue</p>

<p class="mask">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis risus sapien. Maecenas dui orci, blandit et commodo eget, egestas quis odio. Donec eu tortor turpis. Aliquam convallis et nisi ut varius. Proin sapien erat, auctor in efficitur vel, efficitur sit amet justo. In pretium iaculis tempus. Vivamus congue</p>

Свободный перевод ответа от участника @Temani Afif.

2

Такой вот еще интересный вариант. Поделюсь, возможно, кому-нибудь будет востребован.

const circle = document.querySelector('#bg');

function removeIntro() {
  circle.classList.remove('intro');
}

function circleMove(e) {
  removeIntro();
  circle.style.setProperty('--x', e.clientX + 'px');
  circle.style.setProperty('--y', e.clientY + 'px');
}

document.addEventListener('mousemove', circleMove);
circle.addEventListener('touchmove', (e) => {
  removeIntro();
  let touch = e.touches[0];
  e.preventDefault();
  circle.style.setProperty('--x', touch.clientX + 'px');
  circle.style.setProperty('--y', touch.clientY + 'px');
});
:root {--x: 0px; --y: 0px;}

body {position: relative; overflow: hidden; margin: 0; padding: 0;}

section {width: 100%; height: 100vh;}

#bg, #fg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 10vw; color: white; text-transform: uppercase; user-select: none;
}

#bg {
  z-index: 2; min-height: 100vh;
  clip-path: circle(10% at var(--x) var(--y));
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  filter: brightness(0.5); background-image: url(https://i.picsum.photos/id/327/1920/1080.jpg?hmac=2zxvngs6jhNqLzD4qlLNop4cmmHfMTsQJ29pX4TeT6c);
}

#bg.intro {
  clip-path: circle(100% at 50% 50%);
  animation: circleIntro 1s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

@keyframes circleIntro {100% {clip-path: circle(10% at 50% 50%);}}

#fg {
  z-index: 1;
  background-image: url(https://i.picsum.photos/id/327/1920/1080.jpg?hmac=2zxvngs6jhNqLzD4qlLNop4cmmHfMTsQJ29pX4TeT6c);
}
<section>
  <div id="bg" class="intro">stackoverflow</div>
  <div id="fg">stackoverflow</div>
</section>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.