复刻Brontidebg产品页图片平滑滑出滚动动画技术咨询

我帮你整理了一套完整的实现方案，能让页面顶部左侧主图和底部图片在滚动到对应位置时触发平滑滑入动画，完全贴合你要复刻的效果，分三部分来实现：

1. 完善HTML结构 #

首先补全你的基础HTML，加入底部图片和占位内容让页面有足够滚动空间：

<div class="top">
  <h1>scroll down</h1>
</div>
<div class="container">
  <!-- 顶部左侧滑入图片 -->
  <div class="block image-block slideright">
    <figure>
      <img src="your-top-image.jpg" alt="Top Hero Image" class="slide-in-element">
    </figure>
  </div>
  <!-- 占位内容，让页面能滚动到底部图片 -->
  <div class="spacer">
    <p>Scroll down to see the bottom image animate in</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <!-- 底部滑入图片 -->
  <div class="block image-block slideleft">
    <figure>
      <img src="your-bottom-image.jpg" alt="Bottom Image" class="slide-in-element">
    </figure>
  </div>
</div>

2. CSS动画与基础样式 #

设置初始隐藏状态、滑入动画，以及页面基础布局：

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.spacer {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  font-size: 1.2rem;
  color: #333;
}

/* 图片容器：隐藏动画过程中超出的部分 */
.image-block {
  margin: 4rem 0;
  overflow: hidden;
}

.image-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* 初始状态：图片在视口外且透明 */
.slideright .slide-in-element {
  transform: translateX(-100%); /* 顶部图初始在左侧视口外 */
  opacity: 0;
  transition: all 0.3s ease-out; /* 可选：让初始状态过渡更自然 */
}

.slideleft .slide-in-element {
  transform: translateX(100%); /* 底部图初始在右侧视口外 */
  opacity: 0;
  transition: all 0.3s ease-out;
}

/* 滑入动画类：触发时应用 */
.slide-in {
  animation: slideIn 0.8s ease-out forwards;
}

/* 滑入动画关键帧 */
@keyframes slideIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

3. JavaScript滚动监听逻辑 #

监听滚动事件，判断元素是否进入视口，触发动画：

// 获取所有需要动画的图片元素
const slideElements = document.querySelectorAll('.slide-in-element');

// 判断元素是否进入视口的核心函数
function isElementInViewport(element) {
  const rect = element.getBoundingClientRect();
  // 当元素顶部到达视口80%位置时触发动画（可根据需求调整阈值）
  return rect.top <= window.innerHeight * 0.8 && rect.bottom >= 0;
}

// 处理动画触发的函数
function triggerSlideAnimations() {
  slideElements.forEach(element => {
    // 元素进入视口且未触发过动画时，添加动画类
    if (isElementInViewport(element) && !element.classList.contains('slide-in')) {
      element.classList.add('slide-in');
    }
    // 如果需要滚动回去时重新隐藏动画，取消下面的注释
    // else if (!isElementInViewport(element) && element.classList.contains('slide-in')) {
    //   element.classList.remove('slide-in');
    // }
  });
}

// 页面加载时先检查一次（顶部图片可能一开始就在视口内）
window.addEventListener('load', triggerSlideAnimations);

// 滚动时持续检查
window.addEventListener('scroll', triggerSlideAnimations);

// 窗口大小改变时重新检查（防止resize后元素位置变化）
window.addEventListener('resize', triggerSlideAnimations);

关键细节说明 #

• 动画触发时机：我设置的是元素顶部到达视口80%的位置时触发，你可以修改window.innerHeight * 0.8这个值来调整触发的提前量，比如改成window.innerHeight就是元素顶部刚进入视口时触发。
• 动画方向：顶部图片用slideright类从左侧滑入，底部图片用slideleft类从右侧滑入，你可以根据需求交换方向。
• 重复触发：如果需要滚动回去时图片重新隐藏并在再次滚动到位置时重新动画，只需取消JS里的注释代码即可。

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