求助：复刻Revolut官网首页滚动触发的背景线性转白动画

一、背景向白色线性过渡的实现方向 #

你说的这种线性颜色变换叫RGB线性插值过渡，和淡入（透明度变化）的核心区别是：淡入是修改元素的opacity属性，而这种效果是直接对背景色的红、绿、蓝三个通道数值进行线性计算，从初始色逐步趋近白色。

实现思路：

• 先确定初始背景色（比如Revolut首页的深色）和目标色（白色rgb(255,255,255)）
• 监听页面滚动事件，计算滚动进度：用当前滚动距离window.scrollY除以你想要完成整个过渡的总滚动距离（比如设为800px，即滚动800px后背景完全变白）
• 根据滚动进度，计算背景色每个RGB通道的当前值：
  比如初始色是rgb(24,24,24)，那么红色通道的当前值 = 24 + (255 - 24) * 滚动进度，绿、蓝通道同理
• 把计算出的RGB值动态赋值给页面背景

简单代码示例：

body {
  /* 初始背景色，用CSS变量方便动态修改 */
  --bg-r: 24;
  --bg-g: 24;
  --bg-b: 24;
  background-color: rgb(var(--bg-r), var(--bg-g), var(--bg-b));
  /* 可选：加轻微过渡让变化更顺滑 */
  transition: background-color 0.1s linear;
}

const targetScroll = 800; // 完成过渡的滚动距离
window.addEventListener('scroll', () => {
  const scrollProgress = Math.min(window.scrollY / targetScroll, 1); // 进度控制在0-1之间
  const initialR = 24, initialG = 24, initialB = 24;
  
  document.documentElement.style.setProperty('--bg-r', initialR + (255 - initialR) * scrollProgress);
  document.documentElement.style.setProperty('--bg-g', initialG + (255 - initialG) * scrollProgress);
  document.documentElement.style.setProperty('--bg-b', initialB + (255 - initialB) * scrollProgress);
});

二、保持手机图片尺寸不变，放大容器的思路可行性 #

这种方法完全可行，而且就是Revolut官网实现类似效果的思路之一，核心是容器缩放，图片固定尺寸居中。

实现要点：

• 给手机图片的容器设置overflow: hidden，并开启居中布局（比如display: flex; justify-content: center; align-items: center）
• 手机图片本身设置固定宽高（比如width: 300px; height: 600px），并添加flex-shrink: 0防止被容器压缩
• 初始给容器设置较小的尺寸（比如width: 60vw; height: 80vh），监听滚动事件，根据滚动进度逐步将容器的宽高增大到100vw和100vh
• 容器的缩放可以用CSS变量配合滚动进度计算，或者直接动态修改容器的width和height属性

简单代码示例：

.phone-container {
  --container-width: 60;
  --container-height: 80;
  width: calc(var(--container-width) * 1vw);
  height: calc(var(--container-height) * 1vh);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.1s linear, height 0.1s linear;
}

.phone-img {
  width: 300px;
  height: 600px;
  flex-shrink: 0;
}

const targetScroll = 800;
window.addEventListener('scroll', () => {
  const scrollProgress = Math.min(window.scrollY / targetScroll, 1);
  // 从60vw过渡到100vw，80vh过渡到100vh
  const currentWidth = 60 + (100 - 60) * scrollProgress;
  const currentHeight = 80 + (100 - 80) * scrollProgress;
  
  document.querySelector('.phone-container').style.setProperty('--container-width', currentWidth);
  document.querySelector('.phone-container').style.setProperty('--container-height', currentHeight);
});

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