手把手教你使用 gsap 让鼠标移动出来的线条特效

一条会coding的Shark
2,558 阅读3分钟

前言

不知道大家知不知道GSAP这个动画库，它是一个强大的JavaScript动画库。GSAP支持各种动画类型，包括缓动动画、时间轴动画、滚动动画等，同时还提供了丰富的插件和扩展，可以实现更复杂的动画效果。它被广泛应用于网页、移动应用和游戏开发中，是一款非常受欢迎的动画库。

这次就是通过结合GSAP来实现一个鼠标移动而展示出来的线条特效。

效果预览

image.png

话不多说，咱们直接开始接下来的流程。

HTML&&CSS

首先来搭建一下基础的HTML结构。HTML这一部分比较简单，相关代码如下。

 <div class="cursor">
      <div class="text">Juejin</div>
      ......
      <div class="text">Juejin</div>
    </div>

这段代码里包含了一个类名为cursor的div元素，以及在该div元素内部，有着一定数量的类名为text的div元素，每个子元素的文本内容都是Juejin。

接下来就是关于CSS的样式部分了。相关代码如下。

body {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.text {
  position: absolute;
  pointer-events: none;
  color: #fff;
  font-size: 10em;
  -webkit-text-stroke: 2px #000;
  font-weight: 800;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

这里是用来设置body元素以及类名为text的元素的页面样式。

设置text元素的定位方式为绝对定位，即相对于其父元素进行定位。然后将鼠标事件设置为不可用，即鼠标无法对该元素进行交互操作。接下来就是对文本的颜色、字体大小等进行修改。最后使用transform: translate(-50%, -50%)，来设置元素的平移变换，将元素向左上方平移50% 的宽度和高度，以使其居中显示。

以上就是在该线条效果中所应用到的CSS样式了。

JavaScript

最后我们在JS中来应用GSAP这个动画库。相关代码如下。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

首先我们引入该库。

 <script>
      document.addEventListener("mousemove", (e) => {
        gsap.to(".text", {
          x: e.clientX,
          y: e.clientY,
          stagger: -0.02,
        });
      });
    </script>

首先，通过addEventListener方法将一个鼠标移动事件（mousemove）绑定到document对象上。当鼠标移动时，将触发回调函数。回调函数中使用了GSAP库的to方法来创建一个动画。动画作用的目标是具有类名为text的元素。通过选择器.text来获取这些元素。

动画的效果是将元素的x坐标和y坐标分别设置为鼠标当前位置的x坐标和y坐标。这样，当鼠标移动时，元素将跟随鼠标的位置移动。

stagger参数用于指定动画的延迟时间。在这里，使用了一个负值（-0.02），表示每个元素的动画开始时间将比前一个元素晚0.02秒。这样可以创建出一种连续的效果，让元素一个接一个地跟随鼠标移动。

总的来说，这里的JS代码实现了一个鼠标移动时的动画效果，让具有类名为text的元素跟随鼠标的位置移动，并且元素之间的移动具有连续性。

总结

以上就是该线条特效实现的全部过程了，整体而言并不难，应用了GSAP动画库来实现该效果，借此机会也学习了一个新的动画库。完整代码大家可以前往码上掘金查看，如果有什么问题欢迎大家在评论区讨论~

avatar
文章
阅读
粉丝