Javascript鼠标游标圈效果与乘法背景

Question

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

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

好吧，我尝试使用

mix-blend-mode:multiply;

但是显然不一样。

我正在寻找颜色方面的更大差异（也许是相反的颜色）。

有人可以帮我吗？

非常感谢：）。

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

mix-blend-mode: exclusion;

但是在他们的情况下，效果比我的情况更明显，哈哈。

Answer 1

exclusion效果就是这样。

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

这里是橙色：

$(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>

---

此效果的先决条件是整个色度组合从所选的色度对立物开始。

它不只是技术功能，更是设计功能（知道如何将此效果与其他所有功能集成在一起）。

简而言之：设计是一项很难掌握的技能。它是经过多年的努力和失败而积累下来的。
复制设计的效果与原始设计一样好是非常罕见的。

一个更好的策略是在自己想做的事情中都成为最好的人，因为它倾向于给你与与自己做事中最好的人一起工作的特权。