gsap+three实现鼠标滚动tab切换丝带跟随扭动动画背景效果代码-html代码-BFW代码库

gsap+three实现鼠标滚动tab切换丝带跟随扭动动画背景效果代码

代码语言：html

所属分类：选项卡

代码描述：gsap+three实现鼠标滚动tab切换丝带跟随扭动动画背景效果代码，顶部指示条显示当前tab位置，通过点击或滚动鼠标切换tab更换纽带。

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

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

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

  

    <style>

      :root {
        --c0: white;
        --c8: #494942;
        --c9: #31312c;
        --c10: #181816;
        --c11: black;
        --filter-01:url(#turbulence-effect);
      }
      ::-webkit-scrollbar {
        width: 8px;
        height: 3px;
        background-color: var(--c11);
      }
      ::-webkit-scrollbar-thumb {
        height: 50px;
        background-color: var(--c0);
        border-radius: 0px;
      }
      ::-webkit-scrollbar-button {
        background-color: var(--c8);
        display: none;
      }
      ::-webkit-scrollbar-track {
        background-color: var(--c8);
      }
      ::-webkit-scrollbar-track-piece {
        background-color: var(--c8);
      }

      ::-webkit-scrollbar-corner {
        background-color: var(--c9);
      }
      ::-webkit-resizer {
        background-color: var(--c9);
      }
      * {
        box-sizing: border-box;
        font-family: sans-serif;
      }

      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        user-select:none;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background: #000;
      }

      a {
        color:#fff;
        text-decoration:none;
        font-size : 12px;
        font-weight:bold;
      }

      nav {
        position:absolute;
        z-index:6;
        top:30rem;
      }

      menu{
        position: fixed;
        top: 1rem;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 1000;      
      }

      menu ul{
        list-style-type: none;
        display: inline-flex;
        justify-content: center;
      }

      menu ul li{
        display: inline;
        margin:.3rem;
        padding:.7rem 1rem;
        border-radius: .4rem;
        background : rgba(0,0,0,0.5);
      }
      #underline {
        position: fixed;
        top: 0;
        height: 6px;
        background: white;
        border-bottom: solid 1px #f00;
        width: 0;
        transform-origin: left center;
        pointer-events: none;
        transition: width 0.3s ease, left 0.3s ease;
      }
      .scrollTarget {
        position: absolute;
        height: 600%; /* Adjusted to match the number of sections */
        width: 100%;
        top: 0;
        z-index: 0;
      }

      .experience {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
      }

      main {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 3;
      }

      section.panel {
        padding-top: 60px; 
        position: relative;
        display: block;
        width: 100%;
        height: 100vh; /* Ensure each section takes the full viewport height */
        border-bottom: solid 1px rgba(255,255,255,0.1);
        z-index: 4;
      }

      .panel p {
        font-size: 16px;
        color: #fff;
        padding: 10vw;
      }

    </style>
  </head>
  <body>
    <nav>
      <menu>
        <ul>
          <li><a href="#section-1">Section 1</a></li>
          <li><a href="#section-2">Section 2</a></li>
          <li><a href="#section-3">Section 3</a></li>
          <li><a href="#section-4">Section 4</a></li>
          <li><a href="#section-5">Section 5</a></li>
          <li><a href="#section-6">Section 6</a></li>
        </ul>
      </menu>
      <div id="underline"></div>
    </nav>
    <main>

      <section class="panel" id="section-1"><p>Section 1</p></section>
      <secti.........完整代码请登录后点击上方下载按钮下载查看