自定义 Cursor 仅在 Hover 上混合混合模式
[英]Custom Cursor Mix-Blend Mode on Hover Only
问题描述
I need to add the mix-blend-mode on Hover only.
我只需要在 Hover 上添加 mix-blend-mode。 Just like this example:就像这个例子：
Basically make the mix-blend-mode: difference;基本上使mix-blend-mode: difference; to work only on hover. Not sure where I can place the code.仅在 hover 上工作。不确定我可以将代码放在哪里。 See the full code below.请参阅下面的完整代码。 Thanks,.!谢谢，。！ Sorry, I can't run a snippet here.抱歉，我无法在此处运行代码片段。
const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('a'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) { $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0);function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.clientX - 15, y: e.clientY - 15 }); TweenMax.to($smallBall, .1, { x: e.clientX - 5, y: e.clientY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 1.7 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); }
body.cursor { pointer-events: none; } body.cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: multiply; z-index: 1000; } body.cursor__ball circle { fill: #110075; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <!-- Custom Cursor --> <div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div>
<div class="cursor">
<div class="cursor__ball cursor__ball--big ">
<svg height="30" width="30">
<circle cx="15" cy="15" r="12" stroke-width="0"></circle>
</svg>
</div>
<div class="cursor__ball cursor__ball--small">
<svg height="10" width="10">
<circle cx="5" cy="5" r="4" stroke-width="0"></circle>
</svg>
</div>
</div>
<style>
body .cursor {
pointer-events: none;
}
body .cursor__ball {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
body .cursor__ball circle {
fill: #110075;
}}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('a');
// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
$hoverables[i].addEventListener('mouseenter', onMouseHover);
$hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}
// Move the cursor
window.CP.exitedLoop(0);function onMouseMove(e) {
TweenMax.to($bigBall, .4, {
x: e.clientX - 15,
y: e.clientY - 15 });
TweenMax.to($smallBall, .1, {
x: e.clientX - 5,
y: e.clientY - 7 });
}
// Hover an element
function onMouseHover() {
TweenMax.to($bigBall, .3, {
scale: 1.7 });
}
function onMouseHoverOut() {
TweenMax.to($bigBall, .3, {
scale: 1 });
}
</script>
1 个解决方案
解决方案1
0 2022-10-09 16:45:09
You have to add
mix-blend-mode: difference;你必须添加mix-blend-mode: difference;to.cursorand delete it from.cursor__ball.到.cursor并将其从.cursor__ball中删除。In style of
.cursor__ball circlechangefill:blacktofill:white在.cursor__ball circle样式中将fill:black更改为fill:whiteSet
background-color:white;设置background-color:white;tobody(without setting this it doesn't work), becausemix-blend-mode: difference;body（不设置它不起作用），因为mix-blend-mode: difference;changes colors so if body background is white thenmix-blend-modewill change fill of.cursor__ball circleto opposite color so it must havefill:white.更改 colors 因此，如果身体背景为白色，则mix-blend-mode会将.cursor__ball circle的填充更改为相反的颜色，因此它必须具有fill:white。 Like that.像那样。codepen: https://codepen.io/Lukas249/pen/zYjMxRb
代码笔： https://codepen.io/Lukas249/pen/zYjMxRb
const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('a'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) { $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.clientX - 15, y: e.clientY - 15 }); TweenMax.to($smallBall, .1, { x: e.clientX - 5, y: e.clientY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 1.7 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); }
html { background-color: white; } body { background-color: white; } body.cursor { pointer-events: none; } body.cursor__ball { position: fixed; top: 0; left: 0; z-index: 1000; } body.cursor { mix-blend-mode: difference; } body.cursor__ball circle { fill: white; } a { font-size:1.5rem; } <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> </head> <body> <a>text text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text</a> <!-- Custom Cursor --> <div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a>text text text text text text text text text text text text text texttext text text text text text texttext text text
text text text texttext text text text text text texttext text text text text text texttext text text text text text
texttext text text text text text texttext text text text text text texttext text text text text text texttext text
text text text text texttext text text text text text texttext text text text text text texttext text text text text
text texttext text text text text text texttext text text text text text texttext text text text text text texttext
text text text text text texttext text text text text text texttext text text text text text texttext text text text
text text text</a>
<div class="cursor">
<div class="cursor__ball cursor__ball--big ">
<svg height="30" width="30">
<circle cx="15" cy="15" r="12" stroke-width="0"></circle>
</svg>
</div>
<div class="cursor__ball cursor__ball--small">
<svg height="10" width="10">
<circle cx="5" cy="5" r="4" stroke-width="0"></circle>
</svg>
</div>
</div>
<style>
html {
background-color: white;
}
body {
background-color: white;
}
body .cursor {
pointer-events: none;
}
body .cursor__ball {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
body .cursor {
mix-blend-mode: difference;
}
body .cursor__ball circle {
fill: white;
}
a {
font-size: 1.5rem;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('a');
// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
$hoverables[i].addEventListener('mouseenter', onMouseHover);
$hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}
// Move the cursor
window.CP.exitedLoop(0); function onMouseMove(e) {
TweenMax.to($bigBall, .4, {
x: e.clientX - 15,
y: e.clientY - 15
});
TweenMax.to($smallBall, .1, {
x: e.clientX - 5,
y: e.clientY - 7
});
}
// Hover an element
function onMouseHover() {
TweenMax.to($bigBall, .3, {
scale: 1.7
});
}
function onMouseHoverOut() {
TweenMax.to($bigBall, .3, {
scale: 1
});
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
混合混合模式不适用于自定义光标 - Mix-Blend mode doesn't work on custom cursor
是否可以忽略元素的混合混合模式？ - Is it possible to ignore mix-blend-mode of the element?
将 svg 中的混合模式与渐变颜色混合 - Mix blend mode in an svg with gradient colors
从 mix 混合模式中获取差异的度量 - Getting a measure of difference from mix blend mode
测试CSS“混合混合模式” - Testing of CSS “mix-blend-mode”
CSS mix-blend-mode + JS - CSS mix-blend-mode + JS
使用混合混合模式的暗模式：差异不起作用 - Dark Mode using mix-blend-mode: difference not working
当 div 重叠时使用混合混合模式更改文本颜色 - change text color with mix-blend-mode when divs are overlapping
定制 cursor - 在 Hover 上成长 - Custom cursor - Grow on Hover
我的 mix-blend-mode 代码片段有什么问题？ - What is wrong with my mix-blend-mode code snippet?
相关标签