无Elementor Pro实现Elementor浮动视差图片组件方案咨询

以下是无需Elementor Pro，仅用免费版功能实现视差图片的可行方案，基于你提供的代码优化调整：

实现步骤 #

1. 在Elementor编辑器中插入自定义HTML模块
2. 将以下代码粘贴到模块中，替换YOUR_IMAGE_URL为你的图片地址
3. 如需全局生效，可将CSS代码移至Elementor后台的「自定义CSS」中，JS代码移至「自定义代码」的脚本区域

完整代码 #

<div class="parallax-container">
  <div class="parallax-image">
    <img src="YOUR_IMAGE_URL" alt="视差图片">
  </div>
</div>

<style>
.parallax-container {
  position: relative;
  overflow: hidden;
  height: 400px; /* 可根据需求调整容器高度 */
}

.parallax-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 110%; /* 超出容器宽度，避免滚动时出现空白 */
  height: auto;
  opacity: 0.8;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const parallaxImage = document.querySelector(".parallax-image");
  if (!parallaxImage) return;

  window.addEventListener("scroll", function() {
    const scrollPosition = window.scrollY;
    // 调整0.3控制视差速度，数值越小移动越平缓
    parallaxImage.style.transform = `translateX(-50%) translateY(${scrollPosition * 0.3}px)`;
  });
});
</script>

关键优化说明 #

• 移除了无效的active类切换，改为直接通过滚动位置计算图片位移，实现真实视差效果
• 调整图片定位逻辑，使用translateX(-50%)保证图片水平居中，超出容器宽度避免滚动时出现空白
• 添加了元素存在性判断，避免找不到元素时控制台报错
• 可通过修改scrollPosition * 0.3中的系数调整视差移动速度，数值越大图片滚动越快

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