Javascript Mouse Cursor - эффект круга с умноженным фоном - PullRequest
Новая
       24

Javascript Mouse Cursor - эффект круга с умноженным фоном

0 голосов
/ 25 января 2019

enter image description here

, поэтому я увидел это на случайном веб-сайте от awwwards (https://mallardandclaret.com/about/)

Мне было интересно, как этого можно достичь,У меня есть этот код: https://codepen.io/anon/pen/REBYdM#anon-signup

и я попытался использовать 

mix-blend-mode:multiply;

, но он явно не тот.

Я ищубольшая разница в цветах (может быть, обратная или какая-то другая)Используем это: 

mix-blend-mode: exclusion;

, но в их случае эффект намного более очевиден, чем в моем, смеется.

1 Ответ

0 голосов
/ 26 января 2019

Так работает эффект 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.

Вот это с 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>

Обязательным условием этого эффекта является то, что вся хроматическая композиция начинается с выбранных хроматических противоположностей.

Это не просто техническая особенность, а гораздо больше конструктивной особенности (знание того, как интегрировать этот эффект со всем остальным).

Проще говоря, дизайн - это навык, который довольно сложно освоить.Его изучили за годы тяжелой работы и множества неудач.
Очень редко копируемый дизайн работает так же хорошо, как и оригинал.

Лучшая стратегия состоит в том, чтобы стать одним из лучших в том, что вам нравится делать, поскольку это дает вам привилегию работать с другими, которые являются одними из лучших в том, что они делают.

...