如何使用gsap創建自定義游標，如awwwards網站

請給我一個想法，我如何創建像 awwwards 網站這樣的自定義游標。僅使用 gsap。

我嘗試創建自定義游標，但這個 js 代碼讓我非常困惑。所以我想使用 gsap 創建這種型別的游標，而不是代碼。

我可以將此游標javascript代碼遷移到gsap并制作這種型別的游標嗎？

// UPDATE: I was able to get this working again... Enjoy!

var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');
var a = document.querySelectorAll('a');

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x   'px';
  cursorinner.style.top = y   'px';
});

document.addEventListener('mousedown', function(){
  cursor.classList.add('click');
  cursorinner.classList.add('cursorinnerhover')
});

document.addEventListener('mouseup', function(){
  cursor.classList.remove('click')
  cursorinner.classList.remove('cursorinnerhover')
});

a.forEach(item => {
  item.addEventListener('mouseover', () => {
    cursor.classList.add('hover');
  });
  item.addEventListener('mouseleave', () => {
    cursor.classList.remove('hover');
  });
})

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
  cursor: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

h1 {
  font-family: montserrat;
  font-size: 40px;
}

a {
  font-family: Montserrat;
  position: relative;
  text-decoration: none;
}

a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  margin-top: 0px;
  left: 0%;
  background: black;
  transition: width .3s ease;
}

a:hover:after{
  width: 100%;
  left: 0%;
  background: black;
}

.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid black;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(calc(-50%   15px), -50%);
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: black;
  opacity: .3;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
}

.hover {
  background-color: red;
  opacity: 0.5;
}

.cursorinnerhover {
  width: 50px;
  height: 50px;
  opacity: .5;
}

<section>
  <h1>Custom Cursor</h1>
  <a href="#">Hover Me</a>
</section>
<div class="cursor"></div>
<div class="cursor2"></div>

uj5u.com熱心網友回復：

這很容易，在 gsap 中創建自定義游標。使用 evt.clientaxises 屬性來跟隨滑鼠元素。如果你讓它變得光滑和柔軟，那么你可以增加輕松度。

嘗試以下代碼：

document.body.addEventListener("mousemove", evt => {
  const mouseX = evt.clientX;
  const mouseY = evt.clientY;

  gsap.set(".cursor", {
    x: mouseX,
    y: mouseY });


  gsap.to(".shape", {
    x: mouseX,
    y: mouseY,
    stagger: -0.1 });

});

.cursor {
  position: fixed;
  background: #2128bd;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  will-change: transform;
  user-select: none;
  pointer-events: none;
  z-index: 10000;
}
.shapes {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
    pointer-events: none;
}
.shape {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
}

<div class="cursor"></div> //main cursor el
<div class="shapes"> // extra el to following cursor
  <div class="shape shape-1"></div> 
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
</div>

標籤：

上一篇：如何使用.indexOf定位數字停止增加的陣列的索引？

下一篇：div的水平滾動不適用于scrollLeft