自定义光标 - 悬停时增长

Question

我有一个自定义光标，我试图在 link 悬停时设置动画。我希望外光标环在 link 悬停

时扩大规模

我试过调用这个函数，但是它不起作用，光标从文档中消失了

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>

Answer 1

你的 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，因为 mouseover 在悬停元素时不断触发，而 mouseenter 仅在光标进入元素时触发。

P.S。与 the GreenSock forums 相比，您更有可能获得更快的响应。

自定义光标 - 悬停时增长

Custom cursor - Grow on Hover

javascript

gsap