Shopify Dawn Theme添加避文本随机消失爪印背景动画技术问询

不用滚动动画库，原生JS+CSS就能搞定，适合新手操作，步骤和代码如下：

1. 准备爪印图片 #

• 找一张透明背景的爪印PNG（尺寸建议30-50px）
• 上传到Shopify后台：设置→文件→上传图片，复制生成的图片URL

2. 添加CSS样式 #

进入Dawn主题代码编辑器（在线商店→主题→Dawn→操作→编辑代码），找到Assets/base.css，在末尾添加：

.paw-print {
  position: fixed;
  pointer-events: none; /* 不影响页面点击交互 */
  z-index: 10; /* 确保在背景层，不遮挡文本 */
  opacity: 0;
  animation: pawFadeMove linear forwards;
}

@keyframes pawFadeMove {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--move-x), var(--move-y));
  }
}

3. 添加JS控制逻辑 #

找到Layout/theme.liquid，在</body>标签的上方插入以下代码，记得把YOUR_PAW_IMAGE_URL换成你刚才复制的图片URL：

<script>
// 可配置参数
const config = {
  pawImageUrl: 'YOUR_PAW_IMAGE_URL', // 替换成你的爪印图片链接
  animationDuration: 4000, // 爪印从出现到消失的时长（毫秒）
  spawnInterval: 2000, // 新爪印生成的间隔（毫秒）
  maxActivePaws: 3, // 同时显示的最大爪印数量
  avoidElements: ['h1', 'h2', 'p', 'a', '.shopify-section'] // 需要避开的文本/元素选择器
};

let activePawCount = 0;

// 检测爪印位置是否和目标元素重叠
function isPositionSafe(x, y) {
  const elements = document.querySelectorAll(config.avoidElements.join(','));
  for (const el of elements) {
    const rect = el.getBoundingClientRect();
    // 检测坐标是否在元素范围内
    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
      return false;
    }
  }
  return true;
}

// 生成单个爪印
function createPawPrint() {
  if (activePawCount >= config.maxActivePaws) return;

  let x, y;
  // 循环找一个安全的位置
  do {
    x = Math.random() * window.innerWidth;
    y = Math.random() * window.innerHeight;
  } while (!isPositionSafe(x, y));

  // 随机移动方向（x和y轴的偏移量）
  const moveX = (Math.random() - 0.5) * 200; // 左右移动范围
  const moveY = (Math.random() - 0.5) * 200; // 上下移动范围

  const paw = document.createElement('img');
  paw.src = config.pawImageUrl;
  paw.className = 'paw-print';
  paw.style.left = `${x}px`;
  paw.style.top = `${y}px`;
  paw.style.setProperty('--move-x', `${moveX}px`);
  paw.style.setProperty('--move-y', `${moveY}px`);
  paw.style.animationDuration = `${config.animationDuration}ms`;

  document.body.appendChild(paw);
  activePawCount++;

  // 动画结束后移除元素
  setTimeout(() => {
    paw.remove();
    activePawCount--;
  }, config.animationDuration);
}

// 定时生成爪印
setInterval(createPawPrint, config.spawnInterval);

// 窗口大小变化时重置爪印（避免位置错乱）
window.addEventListener('resize', () => {
  document.querySelectorAll('.paw-print').forEach(paw => paw.remove());
  activePawCount = 0;
});
</script>

4. 参数调整说明 #

• animationDuration：爪印从出现到完全消失的时间，数值越大动画越慢
• spawnInterval：每隔多久生成一个新爪印，数值越小生成越频繁
• maxActivePaws：同一时间最多显示几个爪印，避免页面太乱
• avoidElements：如果还有其他需要避开的元素，直接在数组里加对应选择器（比如.product-title）

注意事项 #

• 爪印图片尽量用小尺寸，避免影响页面加载速度
• 测试不同设备（手机/电脑）的显示效果，可调整moveX/moveY的数值改变移动范围
• 动画设置了pointer-events: none，不会干扰按钮、链接的正常点击

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