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

代码语言：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>
      <section class="panel" id="section-2"><p>Section 2</p></section>
      <section class="panel" id="section-3"><p>Section 3</p></section>
      <section class="panel" id="section-4"><p>Section 4</p></section>
      <section class="panel" id="section-5"><p>Section 5</p></section>
      <section class="panel" id="section-6"><p>Section 6</p></section>

    </main>

    <div class="scrollTarget"></div>
    <canvas class="experience"></canvas>

<script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
    }
  }
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollTrigger.3.12.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollToPlugin3.min.js"></script>
    <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
      import { FontLoader } from 'three/addons/loaders/FontLoader.js';
      import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
      import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
      import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
      import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
      import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';


      gsap.registerPlugin(ScrollTrigger);
      gsap.registerPlugin(ScrollToPlugin);

      document.addEventListener("DOMContentLoaded", function() {
        const menuLinks = document.querySelectorAll('menu ul li a');
        const underline = document.getElementById('underline');

        function updateUnderline(target) {
          const linkRect = target.getBoundingClientRect();
          const menuRect = target.closest('menu').getBoundingClientRect();

          gsap.to(underline, {
            duration: 0.3,
            width: linkRect.width,
            left: linkRect.left - menuRect.left,
            ease: "power3.out"
          });
        }

        menuLinks.forEach(link => {
          link.addEventListener('click', function(e) {
            e.preventDefault(); 
            const targetId = this.getAttribute('href');
            gsap.to(window, {
              duration: 1, 
              scrollTo: targetId,
              onComplete: () => {
                updateUnderline(this);
              }
            });
          });
        });

        // Update underline on scroll
        window.addEventListener('scroll', function() {
          const fromTop = window.scrollY + 60; // 60 to account for the fixed nav height

          menuLinks.forEach(link => {
            const section = document.querySelector(link.getAttribute('href'));
            if (
              section.offsetTop <= fromTop &&
              section.offsetTop + section.offsetHeight > fromTop
            ) {
              updateUnderline(link);
            }
          });
        });

        // Initialize underline position
        if (menuLinks.length > 0) {
          up.........完整代码请登录后点击上方下载按钮下载查看