gsap+ScrollToPlugin+TextPlugin+ScrollTrigger实现鼠标滚动文字变化效果代码-html代码-BFW代码库

gsap+ScrollToPlugin+TextPlugin+ScrollTrigger实现鼠标滚动文字变化效果代码

代码语言：html

代码描述：gsap+ScrollToPlugin+TextPlugin+ScrollTrigger实现鼠标滚动文字变化效果代码

代码标签： gsap ScrollToPlugin TextPlugin ScrollTrigger 鼠标滚动

下面为部分代码预览，完整代码请点击下载或在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=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings: "wdth" 800;
}

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

h1 {
  width:30vw;
}

h1 span {
  display:block;
  font-size:7vw;
  position:relative;
  margin-bottom:3vw;
  width: fit-content;
  --bg:red;
}

h1 span:after {
  z-index:-1;
  border-radius:1vw;
  content: "";
  width:100%;
  height:33%;
  left:0;
  bottom:0;
  position: absolute;
  background:var(--bg);
}
</style>


  
  
</head>

<body translate="no">
  <section>
  <h1>
    <span>SCROLL</span>
    <span>FOR</span>
    <span>MORE</span>
  </h1>
</section>

<section></section>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/.........完整代码请登录后点击上方下载按钮下载查看