gsap+ScrollTrigger实现鼠标滚动触发鱿鱼游戏标题文字变形动画效果代码-html代码-BFW代码库

gsap+ScrollTrigger实现鼠标滚动触发鱿鱼游戏标题文字变形动画效果代码

代码语言：html

所属分类：动画

代码描述：使用gsap及ScrollTrigger实现通过鼠标滚动来控制鱿鱼游戏标题文字变形动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>body {
  height: 800vh;
  background: black;
  margin: 0;
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}</style>

</head>
<body>
<!-- partial:index.partial.html -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="400 0 1100 960">
  <defs>
    <filter id="dropshadow_top">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
      <feOffset dx="4" dy="-4" result="offsetblur"></feOffset>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5"></feFuncA>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <filter id="dropshadow_bottom" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
      <feOffset dx="4" dy="4" result="offsetblur"></feOffset>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5"></feFuncA>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <filter id="dropshadow_shade" filterUnits="userSpaceOnUse" x="400">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
      <feOffset dx="4" dy="-4" result="offsetblur"></feOffset>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0"></feFuncA>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <clipPath id="clip-path">
      <rect x="976.09" y="453.96" width="147.83" height="159.59" fill="none" />
    </clipPath>
    <clipPath id="clip-path-2">
      <polygon id="ct_mask_top" points="1141.08 443.3 959.88 135.78 638.48 135.78 620.66 443.3 620.66 471.3 1157.57 471.3 1141.08 443.3" fill="none" />
    </clipPath>.........完整代码请登录后点击上方下载按钮下载查看