我有一个自定义光标,我试图在链接悬停时设置动画。 我希望外光标环在链接悬停时按比例增大
我试过调用这个函数,但是它不起作用,光标从文档中消失了
function growOnHover() {
link.addEventListener("mouseover", function() {
TweenMax.to(outerCursor, 1, {scale: 2})
});
growOnHover();
有人对我做错了什么或如何使它正常工作有任何建议吗?
// set the starting position of the cursor outside of the screen
var clientX = -300,
clientY = -300,
// elements
outerCursor = document.querySelector(".cursor--outer"),
innerCursor = document.querySelector(".cursor--inner"),
link = document.querySelector(".link")
var initCursor = function() {
// add listener to track the current mouse position
document.addEventListener("mousemove", function(e) {
clientX = e.clientX
clientY = e.clientY
});
var render = function() {
TweenMax.set(outerCursor, {
x: clientX,
y: clientY,
delay: .08,
ease: Power1.easeOut
});
TweenMax.set(innerCursor, {
x: clientX,
y: clientY
});
requestAnimationFrame(render);
};
requestAnimationFrame(render);
};
initCursor();
body {
background-color: #ffff;
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
cursor: none;
display: flex;
justify-content: center;
align-items: center;
}
/* Outer Cursor Circle */
.cursor--outer {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #232323;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: fixed;
left: 0;
top: 0;
pointer-events: none;
}
/* Inner Cursor Circle */
.cursor--inner {
width: 4px;
height: 4px;
position: fixed;
left: 10px;
top: 10px;
border-radius: 50%;
z-index: 11000;
background:#232323;
}
/* Google Link */
.link {
cursor: none;
padding: 30px;
transition: opacity 1s;
}
.link:hover {
opacity: .2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<!-- cursor elements -->
<div class="cursor cursor--outer"></div>
<div class="cursor cursor--inner"></div>
<!-- google link -->
<a href="https://google.com" class="link" target="_blank">Google</a>
最佳答案
你的 JS 坏了。修复错误,它工作得很好:
// set the starting position of the cursor outside of the screen
var clientX = -300,
clientY = -300,
// elements
outerCursor = document.querySelector(".cursor--outer"),
innerCursor = document.querySelector(".cursor--inner"),
link = document.querySelector(".link")
var initCursor = function() {
// add listener to track the current mouse position
document.addEventListener("mousemove", function(e) {
clientX = e.clientX
clientY = e.clientY
});
var render = function() {
TweenMax.set(outerCursor, {
x: clientX,
y: clientY,
delay: .08,
ease: Power1.easeOut
});
TweenMax.set(innerCursor, {
x: clientX,
y: clientY
});
requestAnimationFrame(render);
};
requestAnimationFrame(render);
};
initCursor();
function growOnHover() {
link.addEventListener("mouseenter", function() {
TweenMax.to(outerCursor, 1, {scale: 2})
});
link.addEventListener("mouseleave", function() {
TweenMax.to(outerCursor, 1, {scale: 1})
});
}
growOnHover();
body {
background-color: #ffff;
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
cursor: none;
display: flex;
justify-content: center;
align-items: center;
}
/* Outer Cursor Circle */
.cursor--outer {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #232323;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: fixed;
left: 0;
top: 0;
pointer-events: none;
}
/* Inner Cursor Circle */
.cursor--inner {
width: 4px;
height: 4px;
position: fixed;
left: 10px;
top: 10px;
border-radius: 50%;
z-index: 11000;
background:#232323;
}
/* Google Link */
.link {
cursor: none;
padding: 30px;
transition: opacity 1s;
}
.link:hover {
opacity: .2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<!-- cursor elements -->
<div class="cursor cursor--outer"></div>
<div class="cursor cursor--inner"></div>
<!-- google link -->
<a href="https://google.com" class="link" target="_blank">Google</a>
最好使用 mouseenter
而不是 mouseover
因为当 mouseenter
触发时 mouseover
在悬停元素时不断触发仅当光标进入元素时。
附言您在 the GreenSock forums 上更有可能得到更快的响应.
关于javascript - 自定义光标 - 悬停时增长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58923793/