参考sassiholford.com案例 如何实现页面加载时banner图片缩放入场效果

你提到的站点实现该效果的核心逻辑是CSS过渡配合加载状态触发，不需要复杂依赖，具体实现方案如下：

基础实现（适配绝大多数场景） #

• 首先给Banner外层容器设置overflow: hidden，避免图片缩放过程中溢出边界
• 给Banner图片设置初始放大+透明的初始状态，同时配置过渡动画参数
  示例代码如下：

/* Banner外层容器 */
.banner-wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
/* Banner图片样式 */
.banner-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 初始状态：放大1.1倍+完全透明 */
  transform: scale(1.1);
  opacity: 0;
  /* 过渡配置：缩放动画1.2s，透明度动画0.8s，缓动函数匹配动效质感 */
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
  /* 性能优化：提示浏览器提前对该属性做渲染优化 */
  will-change: transform, opacity;
}
/* 加载完成后触发的激活状态 */
.banner-hero.loaded {
  transform: scale(1);
  opacity: 1;
}

• 添加极简JS监听图片加载完成事件，触发动画：

const bannerImg = document.querySelector('.banner-hero')
// 图片已经加载完成直接加激活类
if (bannerImg.complete) {
  bannerImg.classList.add('loaded')
} else {
  // 没加载完成就等加载完成后再加
  bannerImg.addEventListener('load', () => {
    bannerImg.classList.add('loaded')
  })
}

细节优化（和案例站效果对齐） #

• 如果是单页应用，每次路由切换时先移除loaded类，再在下一帧重新添加类即可重新触发入场效果
• 可以给动画添加0.1~0.2s的延迟，避免和页面其他加载动效冲突，只需要在transition属性的时长参数后加延迟值即可
• 适配无障碍需求，可添加prefers-reduced-motion媒体查询，给开启了减少动效的用户关闭动画：

@media (prefers-reduced-motion: reduce) {
  .banner-hero {
    transition: none;
  }
}

内容的提问来源于stack exchange，提问作者Good LUCK Mordi