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>

这个效果的前提是整个色彩构图都是从选定的色彩对立面开始的。

它不只是一个技术特性，更多的是一个设计特性（知道如何将这种效果与其他一切结合起来）。

通俗地说：设计是一项很难掌握的技能。它是经过多年的努力和许多失败的经验教训。
复制的设计与原始设计一样好用是非常罕见的。

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

Javascript鼠标光标圆圈效果与多重背景

Javascript Mouse Cursor circle effect with multiply background

javascript

css

mouse

blend

mode