请求实现Visual Composer内图片视差：添加Extra class name及CSS代码

没问题！要实现像Soundcloud那样的非全屏、窗口式视差效果（不用背景图，直接给图片组件加效果），你只需要按下面的步骤操作：

1. 添加自定义类名 #

在Visual Composer编辑器里：

• 找到你用的Inner Row，在它的设置里添加额外类名：parallax-wrapper
• 找到Inner Row里的图片组件，同样添加额外类名：window-parallax-img

2. 子主题CSS中添加样式 #

把这段代码复制到你的子主题CSS文件里：

.parallax-wrapper {
  position: relative;
  overflow: hidden;
  /* 这里设置容器的高度，根据你的需求调整，比如 500px */
  height: 500px;
  /* 如果想要自适应比例，可以用 padding-top 代替 height，比如 padding-top: 60% 就是16:9比例 */
  /* padding-top: 60%; */
}

.window-parallax-img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
  /* 0.3 是视差系数，数值越小移动越慢，可自行调整 */
  transform: translateY(calc(var(--scroll-offset, 0) * 0.3));
}

3. 添加滚动监听的JS（关键） #

视差效果需要监听页面滚动来计算偏移，你可以把这段代码加到子主题的JS文件里，或者通过自定义HTML模块放在页面底部：

window.addEventListener('scroll', () => {
  const wrappers = document.querySelectorAll('.parallax-wrapper');
  wrappers.forEach(wrapper => {
    const rect = wrapper.getBoundingClientRect();
    // 计算容器相对于视口的滚动偏移量
    const scrollOffset = Math.max(0, rect.top - window.innerHeight) * -1;
    wrapper.style.setProperty('--scroll-offset', scrollOffset);
  });
});

效果说明 #

• 容器的高度（或比例）可以根据你的布局自由调整，height:120%的图片是为了留出滚动时的移动空间，避免露出空白
• 视差系数0.3可以修改：数值越大，图片滚动速度越接近页面滚动速度；数值越小，视差效果越明显
• object-fit: cover保证图片在容器内按比例填充，不会变形

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