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

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

代码语言：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">
   .........完整代码请登录后点击上方下载按钮下载查看