gsap+ScrollTrigger+MotionPathPlugin实现页面滚动插画跟随动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap+ScrollTrigger+MotionPathPlugin实现页面滚动插画跟随动画效果代码

代码标签： gsap ScrollTrigger MotionPathPlugin 页面滚动插画跟随动画

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&display=swap');

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family: "Abhaya Libre", serif;
  font-weight: 600;
  font-style: normal;
}

main {
  display:flex;
  justify-content:center;
  flex-direction:column;
}

section {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100vh;
}

#s2 {
  background:#1d0042;
}

svg {
  position:relative;
  margin-top:-9vw;
}

h1 {
  font-size:clamp(3vw, 8.5vw, 99px);
  text-align:center;
}

#s1 h1 {
  font-weight:800;
}

.pink {
  color:rgb(239, 208, 255);
  display:block;
}

.radial {
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at -20% 0, #2b0aff, #e93abf 31%, #f658a8 48%, #febf72);
  -webkit-background-clip: text;
  background-clip: text;
  display: block;
}

.smaller {
  font-size:0.35em;
  font-weight:500;
}
</style>


  
</head>

<body translate="no">
  <main>

<section id="s1">
  <h1>
    <span class="radial">A new medium for</span>
    <span class="radial">presenting ideas.</span>
    <span class="smaller">(scroll further)</span>
  </h1>  
</section>

<svg xmlns="http://www.w3.org/2000/svg" fill="#1d0042" stroke="#1d0042" stroke-width="1.8" viewBox="10 0 970 200">

  <g class="ring3">
    <path d="M543.5 60.6C269.8 27.7 1 26.8 1 64.2v386h998v-278c0-27.4-181.8-78.7-455.5-111.6z"/>
    <image mask="url(#m1)" y="35" width="999" height="170" preserveAspectRatio="none" href="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wCEAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDIBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//CABEIAEUBTQMBIgACEQEDEQH/xAAaAAEBAQADAQAAAAAAAAAAAAAAAgEDBQcG/9oACAEBAAAAAOzzQAAAAACus2qva3d1oAAAAX8dV3dXd1dXVVtbu60AAF+Z7V1V3dXd3d1d1dXVVVbu7rQL8jbu1tVW3VXV1d3dXd3V1dXVVVVu8vj2a1ut3d3a2q2ququrq7uru6u6vm8xwA01rdbu7tbW1VVdVdXV8/xuAAANNa3dbW7tVtc/WYAAAABrWt1zf//EABoBAQEBAAMBAAAAAAAAAAAAAAABAgMFBgT/2gAKAgIQAxAAAADm76JZSAAAAAPRdbjWLjXHcaxcazc6zc2WJYAD2fQSyyyy5ubnWbi41i41jWLjWNZuNZeu6MACFIWWWXNlzc3Nxr7vjoAAAAgFlj//xAAeEAACAwEBAQEBAQAAAAAAAAABBBESEwMCAEAgMP/aAAgBAQABAgA+7WmZmZmZmZmZmZmZmZmZmZmZmZmfBLQZDIYDA77a6XtP7efxcDgcDgcDgcDYbDQaDIZDIYDA77a6XtP4ufxYDIZDQaDQbDYbDYcDgcDgcDgcDYbDQaDQZDIZDAYHfbXS9p/vn966aa667DsO47hgMBkMhoNBoNBsNhsNhsNhwOBsNhsNhoNBoMhkMhkMBjcdtefT2bWta97300001122HcdwwGAyGQyGg0Gg2Gw2Gw2Gw2Gw2Gw2Gw0GuTXv/GZm1rWve99NNNddh2Hcdx3DAYDIZDIaDQaDYbDfFv3+SZm1rWve9x00011HYdtx3DHBj1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwxxxxxxyyy48v/EACgQAAMAAwAABAYCAwAAAAAAAAABYVFioQIQISIRMUBBUnESMiAwUP/aAAgBAQADPwD1fuHkeR5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8sb+PqxfyfqLIsl8kIQhCF9d8z3P1+5SlKUpSlKUpSlEIQhCF9H8x/zfr9ylKUpSlKUpSlKUpSlKUpSiyIQhCEL/R8z3v9/wCL8qPI8lKUpSlKUpSlKUpSlKUpSl8qLIhCF6nv8X7+ipSlKUpSlKUpSlKUpSlKfP1Pf4v39bfKlKUpSlKU/t6nv8X7/wCRT+3qe9+774NuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuD/AC4P8uD/AC4eL3fDx8P/xAAeEQACAwEBAAMBAAAAAAAAAAAAAQQREhMDECAwQP/aAAgBAgEBPwDkzDMsplfwuOhxhxhxhxhxhxhx2PwZxZyZzZhmWUyvtkyZMGEc0ckcUPxQ/BDjocYcYcYcYcYccccfgcB+L/CiiijJkwYRzRyRxQ/FD8EPwRZZZZZZZZZZZZZZZZZZfwz/xAAbEQEBAQEBAQEBAAAAAAAAAAAAExIRAUAgMP/aAAgBAwEBPwDfjXjvjvxVVVVVVVVUUbb8a8d8d/emm221FFFFFFVVVVVVVVFP4dddaaabbbbUUUU+b//Z"/>
    <mask id="m1" fill="#fff">
      <path d="M999,172c0,32.9-240.3,39.3-514,6.4S1,98.2,1,64c0-37.4,268.8-36.5,542.5-3.6S999,144.6,999,172z M520,64.6 c-193.6-24.6-409.4-26.4-410,5s167.8,65.7,361.4,90.3s421.1,27.9,421.7-3.6S713.6,89.2,520,64.6z"/>
    </mask>
  </g>
  
  <g id="b2">
    <ellipse cx="933.8" cy="172.6" rx="7" ry="46" transform="rotate(-83.812 933.77606 172.57357)" />
    <mask id="m6" fill="#fff" stroke-width="1">
      <circle id="c2" cx="899.2" cy="144.2" r="27.2"/>
    </mask>
    <use fill="#ea42c2" href="#c2"/>
    <circle mask="url(#m6)" cx="917.8" cy="162.8" r="27.2" opacity="0.7"/>
  </g>
  <use href="#b2" x="-853" y="-84" transform="scale(0.87)" />
  
  <g mask="url(#m4)">
    <g class="ring2">
      <path fill="#ff8caf" d="M217 70c0-18.3 128.9-37.2 283.9-38.8C655.8 29.6 782 42.1 782 58M217 70v260h565V58"/>
      <rect x="646" y="64" width="125" height="127"/>
      <path d="M782 58c0 19-135.6 40-290.5 41.5S217 89.8 217 70c0-18.3 128.9-37.2 283.9-38.8C655.8 29.6 782 42.1 782 58z"/>
      <image mask="url(#m2)" width="565" height="69" x="217" y="31" preserveAspectRatio="none" href="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASA.........完整代码请登录后点击上方下载按钮下载查看