所以我想做一个动画效果。当我将鼠标悬停在纳瓦巴尔上时，我希望它在有限的空间内跟随 cursosr。您可以看到此页面的示例。http://a.justtestingit.com/。到目前为止，这是我的代码，但并不是我想要做的。有人可以帮忙吗？
const cursor = document.querySelector('#cursor');
document.addEventListener("mousemove", function(e) {
cursor.setAttribute("style", "top: " + (e.clientY - 10) + "px; left: " + (e.clientX - 10) + "px;")
})
document.getElementById("navbarimg").addEventListener("mouseover",function(e) {
cursor.classList.toggle("hover")
})
document.getElementById("navbarimg").addEventListener("mouseout",function(e) {
cursor.classList.toggle("hover")
})
document.querySelector('body').addEventListener('mousemove',follow);
function follow(){
var nav = document.querySelectorAll('.nav');
nav.forEach(function(nav){
let x = (nav.getBoundingClientRect().left)+(nav.clientWidth / 2);
let y = (nav.getBoundingClientRect().top)+(nav.clientHeight / 2);
let radian = Math.atan2(event.pageX-x,event.pageY-y);
let rot =(radian*(180/Math.PI)*-1)+270;
nav.style.transform="rotate("+ rot +"deg)";
})
}body{margin:0;height:100vh;background:rgb(27,27,27);}
#cursor{width:30px;height:30px;border:2px solid gray;border-radius:50%;position:fixed;transition-duration: 100ms;transition-timing-function: ease-out;}
#navbarimg:before{position:absolute;top:50%;left:50%;transform:tranlate(-50%,-50%);}
#cursor.hover{width: 100px;height:100px;opacity:0.1;background-color:gray;}
#cursor.hover1{width: 300px;height:300px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cursor</title>
</head>
<body>
<div id="cursor"></div>
<div class="nav">
<a href="../"><img id="navbarimg" src="navbar.svg" alt="navbar"></a> </div>
</body>
</html>这可以使用预构建的 GSAP 模板来实现。
看看这是否有帮助 -
https://codepen.io/VweMWoz
const tl = gsap.timeline({paused: true});
tl.from(
".gsap-swipe",
{
y: 20,
x: 20,
rotate: -40,
duration: 3,
transformOrigin: '30% 80%',
ease: Elastic.easeOut.config(1, 0.5),
}, 0
)
.fromTo(
".swipe",
{
xPercent: -100
},
{
duration: 1,
xPercent: 100,
ease: Sine.easeInOut,
stagger: {
each: 0.15
}
}, 0
)
.from(
".maskSwipe",
{
xPercent: -100,
ease: Sine.easeInOut
},
0.4
)
.from(
"#hello",
{
duration: 1.5,
drawSVG: "0%"
},
1
)
.from(
".swoop",
{
duration: 2,
drawSVG: "0%"
},
1
)
.from(
".line",
{
drawSVG: "0%",
duration: 0.5,
stagger: {
each: 0.2
}
},
1
)
.from(
".shape",
{
scale: 0,
duration: 1.3,
transformOrigin: "50% 50%",
rotate: '+=random(-60, 60)',
ease: Elastic.easeOut.config(1, 0.8),
stagger: {
each: 0.2
}
},
0.2
);
// ScrubGSAPTimeline(tl);
let hover = document.querySelector('.js-hover');
hover.addEventListener('mouseover', playTl);
hover.addEventListener('mouseout', resetTl);
function playTl(){
tl.timeScale(1.25).restart();
}
function resetTl(){
tl.progress(0).pause();
}