Javascript Mouse Cursor circle effect with multiply background

问题

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

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

and well, I tried using

mix-blend-mode:multiply;

but it's obviously not the same.

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

Can anyone help me with this one?

Much appreciated :).

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.

回答1:

It's how the exclusion effect works.

The key lies in setting the background-color of .theBall.

Here it is with orange:

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

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

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.

Here it is with yellow:

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

来源：https://stackoverflow.com/questions/54372291/javascript-mouse-cursor-circle-effect-with-multiply-background