gsap+ScrollTrigger实现鼠标滚动触发鱿鱼游戏标题文字变形动画效果代码
代码语言：html
所属分类：动画
代码描述：使用gsap及ScrollTrigger实现通过鼠标滚动来控制鱿鱼游戏标题文字变形动画效果代码
代码标签： 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>
<clipPath id="clip-path-3">
<polygon id="ct_mask_bottom" points="959.88 135.78 762.19 471.3 1157.57 471.3 959.88 135.78" fill="none" />
</clipPath>
</defs>
<g>
<g id="Top_circle">
<path id="tc_top" d="M959.88,68a72.21,72.21,0,1,1-72.21,72.21A72.21,72.21,0,0,1,959.88,68h327.74" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="457 800" />
<path id="tc_right" d="M1274,377.71a32.48,32.48,0,1,0-32.47,32.47A32.48,32.48,0,0,0,1274,377.71l-.4-323.42" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="240 600" />
</g>
<line id="right_line1" x1="1368.87" y1="281.63" x2="1368.87" y2="448.39" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<line id="right_line3" x1="1139.51" y1="462.74" x2="1139.51" y2="578.54" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<line id="right_line4" x1="1061.44" y1="526.08" x2="1139.51" y2="526.08" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<g clip-path="url(#clip-path)">
<polyline id="seven" points="1008 634.32 1084.21 475.75 1017.9 475.75" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="242 500" filter="url(#dropshadow_bottom)" />
</g>
<line id="top_line1" x1="1052.14" y1="281.63" x2="1052.14" y2="448.39" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<line id="top_line2" x1="974.94" y1="375.4" x2="1052.14" y2="375.4" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<circle id="bottom_circle" cx="847.47" cy="520.64" r="32" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="242 500" />
<circle id="top_circle_2" cx="944.88" cy="375.4" r="32" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="242 500" />
<line id="left_line_2" x1="694.86" y1="375.4" x2="821.69" y2="375.4" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<g id="Center_triangle">
<g clip-path="url(#clip-path-2)">
<g>
<g id="ct_top">
<polygon id="ct_r" points="1109.58 445.03 944.87 161.26 959.88 135.78 1142.12 445.07 1109.58 445.03" fill="#fff" />
<polygon id="ct_l" points="978.51 167.4 810.21 444.9 777.79 444.82 959.88 135.78 978.51 167.4 978.51 167.4" fill="#fff" />
</g>
<g clip-path="url(#clip-path-3)">
<polygon id="ct_b" points="1141.08 443.3 1157.57 471.3 762.19 471.3 778.68 443.3 811.18 443.3 1108.58 443.3 1141.08 443.3" fill="#fff" />
</g>
</g>
</g>
</g>
<line id="left_line_3" x1="594.07" y1="495.4" x2="594.07" y2="414.25" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<g id="left_circles">
<path id="left_circle1" d="M628.56,869.94H959.88a68.23,68.23,0,1,0-68.23-68.23,68.23,68.23,0,0,0,68.23,68.23" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="430 850" />
<path id="left_circle2" filter="url(#dropshadow_bottom)" d="M642.56,375.4a48.5,48.5,0,1,1-48.49-48.49,48.49,48.49,0,0,1,48.49,48.49V883.94" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" stroke-dasharray="400 850" />
</g>
</g>
<line id="left_line_4" filter="url(#dropshadow_bottom)" x1="481.35" y1="495.4" x2="674.73" y2="495.4" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="28" />
<g id="Bottom_Rect">
<line id="br_top" x1="780.25" y1="515.2" x2="1139.51" y2="515.2" fill="none" stroke="#fff" stroke-linecap="square" stroke-miterlimit="10" stroke-width="28" />
<line id="br_right" x1="1139.51" y1="515.2" x2="1139.51" y2="801.71" fill="none" stroke="#fff" stroke-linecap="square" stroke-miterlimit="10".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0