具有多重背景的Javascript鼠标光标圆圈效果

Question

所以我在 awwwards 的一个随机网站上看到了这个 (https://mallardandclaret.com/about/)

我想知道如何实现这一点。 我有这个代码笔： https://codepen.io/anon/pen/REBYdM#anon-signup

好吧，我尝试使用

mix-blend-mode:multiply;

但显然不一样。

我正在寻找颜色方面的更大差异（可能是相反的，或者其他什么）。

谁能帮我解决这个问题？

非常感谢:)。

编辑： 所以他们正在使用这个：

mix-blend-mode: exclusion;

但在他们的情况下，效果比我的要明显得多，哈哈。

Answer 1

这就是exclusion 效果的工作原理。

关键在于设置.theBall的background-color。

这里是橙色：

$(function() {
  var prefix = function() {
    var a = window.getComputedStyle(document.documentElement, ""),
      b = (Array.prototype.slice.call(a).join("").match(/-(moz|webkit|ms)-/) || "" === a.OLink && ["", "o"])[1];
    return "WebKit|Moz|MS|O".match(new RegExp("(" + b + ")", "i"))[1], "-" + b + "-"
  }();
  $(document).mousemove(function(e) {
    mouseX = e.pageX + 15;
    mouseY = e.pageY - $(window).scrollTop() + 15;
    $('.theBall-outer').attr('style', prefix + 'transform:translate(' + mouseX + 'px,' + mouseY + 'px)');
  });

  $(document).on('mouseenter', 'a', function() {
    $('.theBall').addClass('zooming');
  }).on('mouseleave', 'a', function() {
    $(".theBall").removeClass("zooming")
  });
})

body {
	font-family: 'Neuton', serif;
	font-size: 18px;
	font-weight: 300;
	width: 100%;
	line-height: 1.4;
	color: #141414;
	letter-spacing: 0.2px;
	background-color: #191919;
	cursor: none;
  margin: 0;
}
* {
  box-sizing: border-box;
}

.theBall, .theBall-outer {
	mix-blend-mode: exclusion;
	width: 20px;
	height: 20px;
}
.theBall-outer {
	position: fixed;
	top: -20px;
	left: -20px;
	z-index: 5000;
	pointer-events: none!important;
}
.theBall {
	position: absolute;
	background-color: #f50;
	border-radius: 50%;
	-webkit-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	-moz-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	-ms-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	-o-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	transform-origin: center center;
}
.dark_page .theBall,
.coloring .theBall {
	background-color: #5cffbb;
}
.zooming.theBall {
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}
::selection {
    background-color: #5cffbb;
    color: #fff;
}

a.test {
  font-size: 5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href class="test">test</a>
<div class="theBall-outer"><div class="theBall"></div></div>

那么只需设置高对比度（黑色与白色）。

mix-blend-mode: exclusion 会将接近黑色的颜色投射为选定的background-color，并将颜色接近白色的颜色投射为选定的background-color 的反色。

这里是黄色：

$(function() {
  var prefix = function() {
    var a = window.getComputedStyle(document.documentElement, ""),
      b = (Array.prototype.slice.call(a).join("").match(/-(moz|webkit|ms)-/) || "" === a.OLink && ["", "o"])[1];
    return "WebKit|Moz|MS|O".match(new RegExp("(" + b + ")", "i"))[1], "-" + b + "-"
  }();
  $(document).mousemove(function(e) {
    mouseX = e.pageX + 15;
    mouseY = e.pageY - $(window).scrollTop() + 15;
    $('.theBall-outer').attr('style', prefix + 'transform:translate(' + mouseX + 'px,' + mouseY + 'px)');
  });

  $(document).on('mouseenter', 'a', function() {
    $('.theBall').addClass('zooming');
  }).on('mouseleave', 'a', function() {
    $(".theBall").removeClass("zooming")
  });
})

body {
	font-family: 'Neuton', serif;
	font-size: 18px;
	font-weight: 300;
	width: 100%;
	line-height: 1.4;
	color: #141414;
	letter-spacing: 0.2px;
	background-color: #191919;
	cursor: none;
  margin: 0;
}
* {
  box-sizing: border-box;
}

.theBall, .theBall-outer {
	mix-blend-mode: exclusion;
	width: 20px;
	height: 20px;
}
.theBall-outer {
	position: fixed;
	top: -20px;
	left: -20px;
	z-index: 5000;
	pointer-events: none!important;
}
.theBall {
	position: absolute;
	background-color: #ff0;
	border-radius: 50%;
	-webkit-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	-moz-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	-ms-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	-o-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
	transform-origin: center center;
}
.dark_page .theBall,
.coloring .theBall {
	background-color: #5cffbb;
}
.zooming.theBall {
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}
::selection {
    background-color: #5cffbb;
    color: #fff;
}

a.test {
  font-size: 5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href class="test">test</a>
<div class="theBall-outer"><div class="theBall"></div></div>

---

此效果的先决条件是整个半音构图从选定的半音对立开始。

它不是一个技术特性，而更多的是一个设计特性（知道如何将此效果与其他所有内容相结合）。

简单地说：设计是一项很难掌握的技能。它是通过多年的努力和许多失败学到的。
复制的设计与原始设计一样有效是非常罕见的。

一个更好的策略是在你喜欢做的任何事情上成为最优秀的人，因为它往往会让你有特权与在他们所做的事情上最优秀的人一起工作。