gsap+svg线条绘制鸟儿和文字动画效果代码-html代码-BFW代码库

gsap+svg线条绘制鸟儿和文字动画效果代码

代码语言：html

所属分类：动画

代码描述：采用gsap+svg线条绘制鸟儿和文字动画效果，结合了SplitText3、ScrollTrigger、DrawSVGPlugin3、ScrollToPlugin3等插件实现鼠标滚动鸟儿飞翔效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@200&display=swap');
        
        html, body {
          opacity:0;
          width:100%;
          height:100%;
          background:#004242;
          font-family: 'Source Serif Pro', serif;
        }
        
        svg {
          overflow:visible;
          position:fixed;
          width:100%;
          height:600px;
          bottom:0;
        }
        
        .downArrow {
          cursor:pointer;
          transform:translate(50vw, 425px);
        }
        
        .scrollDistance {
          width:100%;
          height:300vh;
        }
        
        h1 {
          font-size:75px;
          color:#002e2e;
          position:fixed;
          left:50%;
          top:50%;
          width:240px;
          transform:translate(-45%, -50%);
        }
        
        h1 span {
          display:block;
          font-size:1.67em;
          line-height:1.12em;
          margin-bottom:-0.12em;
        }
    <.........完整代码请登录后点击上方下载按钮下载查看