Javascript鼠标光标圈效果与乘法背景 [英] Javascript Mouse Cursor circle effect with multiply background

问题描述

所以我在awwwards
（ https://mallardandclaret.com/about/ ）

so I saw this on a random website from awwwards ( https://mallardandclaret.com/about/ )

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

I was wondering how can this be achieved. I've got this codepen: https://codepen.io/anon/pen/REBYdM#anon-signup

以及我尝试使用

mix-blend-mode:multiply;

但显然不一样。

我正在寻找颜色方面的更大差异（可能反过来，或者某些东西）。

I'm looking for a bigger difference in terms of colors ( maybe inverse them, or something ).

任何人都可以帮我这个吗？

Can anyone help me with this one?

非常感谢：）。

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

edit: so they are using this one:

mix-blend-mode: exclusion;

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

but in their case the effect is much more obvious than in mine, lol.

推荐答案

排除效果的效果如何。

关键在于设置 .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>

然后只是设置高对比度（black-ish vs white-ish）。

Then it's just a matter of setting high contrasts (black-ish vs white-ish).

mix-blend-mode：排除会将接近黑色的颜色投射为选定的背景颜色，颜色更接近于白色与所选背景颜色的色差相反。

mix-blend-mode: exclusion will cast colors close to black as the selected background-color and colors closer to white as the chromatic opposite of the selected 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>

此效果的先决条件是整个彩色合成从选定的色彩对立开始。

The prerequisite of this effect is that the entire chromatic composition starts from the selected chromatic opposites.

它不仅仅是一项技术功能和更多的设计功能（知道如何将此效果与其他所有功能集成）。

It is less than a technical feature and much more of a design feature (knowing how to integrate this effect with everything else).

用简单的英语说：设计是一项很难掌握的技巧。经过多年的努力和许多失败，我们学到了这一点。

复制的设计与原版一样有效。

To put it in plain English: design is a skill that's quite hard to master. It's learned over years of hard work and a lot of failures.
It is quite rare that a copied design works as well as the original.

更好的策略是成为最好的策略，无论你喜欢做什么，因为它倾向于给你特权与最好的人合作他们做了什么。

A better strategy is to become among the best at whatever it is you like to do, as it tends to give you the privilege of working with others who are among the best at what they do.

这篇关于Javascript鼠标光标圈效果与乘法背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！