在Shopify中实现背景图片滚动缩放交互效果（随滚动方向变化）

实现思路 #

核心是监听页面滚动事件，根据滚动方向和滚动距离动态调整背景图片的缩放比例：向下滚动时缩小图片，向上滚动时放大图片。

具体实现步骤 #

1. 标记背景图片容器 #

在Shopify主题代码里找到承载背景图片的元素，给它添加专属类名zoom-bg-container，方便后续定位：

<div class="zoom-bg-container">
  <!-- 你的背景图片元素，比如img标签或带background-image的div -->
</div>

2. 设置基础CSS样式 #

给容器和图片配置基础样式，确保缩放效果正常展示：

.zoom-bg-container {
  position: relative;
  width: 100%;
  height: 80vh; /* 根据需求调整高度 */
  overflow: hidden;
}

.zoom-bg-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
  transition: transform 0.1s ease-out; /* 平滑过渡动画 */
  transform-origin: center center; /* 以图片中心为缩放原点 */
}

3. 编写滚动交互逻辑 #

通过JavaScript监听滚动事件，判断滚动方向并调整缩放比例：

// 初始化变量
let lastScrollPos = 0;
const bgImage = document.querySelector('.zoom-bg-container img');
let currentScale = 1; // 初始缩放比例
const scaleStep = 0.001; // 每次滚动的缩放幅度，可按需调整
const minScale = 0.8; // 最小缩放阈值，防止图片过度缩小
const maxScale = 1.2; // 最大缩放阈值，防止图片过度放大

// 监听页面滚动
window.addEventListener('scroll', function() {
  const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
  
  // 判断滚动方向
  if (scrollPos > lastScrollPos) {
    // 向下滚动：缩小图片
    currentScale = Math.max(currentScale - scaleStep, minScale);
  } else {
    // 向上滚动：放大图片
    currentScale = Math.min(currentScale + scaleStep, maxScale);
  }
  
  // 应用缩放效果
  bgImage.style.transform = `scale(${currentScale})`;
  
  // 更新上一次滚动位置
  lastScrollPos = scrollPos;
});

4. 在Shopify主题中部署代码 #

• 登录Shopify后台，进入「在线商店」→「主题」→「操作」→「编辑代码」
• 在首页模板（通常是index.liquid）中，给目标背景容器添加zoom-bg-container类名
• 将CSS代码粘贴到主题的base.css或theme.css文件末尾
• 将JavaScript代码添加到theme.js文件末尾，或在页面底部用<script>标签嵌入

适配与优化 #

• 如果背景是用background-image实现的，将JavaScript中的img选择器替换为容器元素，把transform: scale()改为background-size: ${currentScale * 100}%（需确保容器设置background-position: center）
• 调整scaleStep、minScale、maxScale参数，可以适配不同的交互速度和缩放范围
• 测试移动端和桌面端的滚动效果，确保交互流畅

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