如何在Flutter Web中实现滚动时背景渐消的动画效果？

这个效果完全不需要引入复杂的视差、动画第三方库，核心逻辑就是将背景图的透明度和页面滚动偏移量绑定，总共几十行代码就能实现：

实现步骤 #

• 第一步：HTML分层，总共3层结构即可，分为背景层、内容层（包含首屏logo+后续页面内容）

<!-- 全局页面容器 -->
<div class="page-wrapper">
  <!-- 背景图专属层 -->
  <div class="hero-bg"></div>
  <!-- 前景内容层 -->
  <div class="content">
    <!-- 首屏logo区域 -->
    <header class="hero-header">
      <img src="替换为你的logo路径" alt="站点logo" class="site-logo">
    </header>
    <!-- 后续页面主体内容 -->
    <main class="page-content">
      <!-- 填充你的页面内容，保证页面有足够滚动高度 -->
    </main>
  </div>
</div>

• 第二步：CSS基础布局，核心是固定背景层位置，层级低于前景内容

.page-wrapper {
  position: relative;
  /* 实际项目可删除该属性，由内容自动撑开高度 */
  min-height: 200vh;
}
.hero-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* 替换为你的背景图地址 */
  background: url(替换为你的背景图路径) center/cover no-repeat;
  z-index: 1;
  /* 可选：加暗遮罩保证前景logo清晰度 */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
  }
}
.content {
  position: relative;
  z-index: 2;
}
.hero-header {
  /* 首屏占满整个视口，logo居中显示 */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-logo {
  width: 220px;
  /* 根据需求调整logo大小、样式 */
}
.page-content {
  background: #ffffff;
  min-height: 100vh;
  padding: 3rem 6%;
}

• 第三步：实现滚动渐隐效果，两种方案可选
  1. 优先用原生CSS滚动驱动，无需写JS：
     给.hero-bg添加如下样式即可：

  .hero-bg {
    /* 原有样式不变，新增以下内容 */
    animation: bgFade linear forwards;
    animation-timeline: scroll(root);
    /* 滚动0到300px区间内完成渐隐，可自行调整数值控制渐隐速度 */
    animation-range: 0 300px;
  }
  @keyframes bgFade {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  

  2. 兼容旧浏览器的JS方案，仅需5行代码，无需引入任何依赖：

  window.addEventListener('scroll', () => {
    const scrollOffset = window.scrollY;
    // 300为渐隐的滚动阈值，可自行调整
    const bgOpacity = Math.max(0, 1 - scrollOffset / 300);
    document.querySelector('.hero-bg').style.opacity = bgOpacity;
  })
  

如果你需要首屏的logo跟着背景图一起渐隐，只要给.site-logo也添加同样的透明度绑定规则即可。调整渐隐阈值的数值，就能控制背景消失的快慢，数值越大渐隐过程越长。

内容的提问来源于stack exchange，提问作者pianoman102