gsap实现网页资讯卡片滚动控制背景视频翻页过渡页面代码-html代码-BFW代码库

gsap实现网页资讯卡片滚动控制背景视频翻页过渡页面代码

代码语言：html

代码描述：gsap实现网页资讯卡片滚动控制背景视频翻页过渡页面代码，点击卡片可显示详情页。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
       :root{
    --bg:#07080c;
    --ink:#f4f1ea;
    --muted:rgba(244,241,234,.55);
    --accent:#e9b949;
    --line:rgba(244,241,234,.14);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:auto}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---------- Fixed video backdrop ---------- */
  #stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000;}
  #stage video{
    position:absolute;top:50%;left:50%;
    min-width:100%;min-height:100%;width:auto;height:auto;
    transform:translate(-50%,-50%) scale(1.08);
    object-fit:cover;will-change:transform;
  }
  #stage::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(120% 80% at 50% 20%, transparent 40%, rgba(7,8,12,.55) 100%),
      linear-gradient(180deg, rgba(7,8,12,.45) 0%, rgba(7,8,12,.15) 35%, rgba(7,8,12,.6) 100%);
    pointer-events:none;
  }

  /* ---------- Loader ---------- */
  #loader{
    position:fixed;inset:0;z-index:50;background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:22px;transition:opacity .7s ease;
  }
  #loader.hide{opacity:0;pointer-events:none}
  .load-word{font-size:clamp(24px,6vw,56px);font-weight:700;letter-spacing:.28em;text-indent:.28em;text-align:center;}
  .load-bar{width:min(240px,60vw);height:2px;background:var(--line);overflow:hidden}
  .load-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
  .load-pct{font-size:12px;letter-spacing:.3em;color:var(--muted)}

  /* ---------- Fixed HUD ---------- */
  #progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:40;}
  .hud{
    position:fixed;z-index:30;font-size:11px;letter-spacing:.28em;
    color:var(--muted);text-transform:uppercase;mix-blend-mode:difference.........完整代码请登录后点击上方下载按钮下载查看