如何在WordPress的Oxygen Builder中实现背景横向滚动效果

调整说明 #

你当前的代码已经完成了容器和文字的基础样式，只需要调整CSS属性并补充少量JS代码即可实现目标滚动效果。

原有HTML代码 #

<div id="div_block-89-2" class="ct-div-block ">
  <h1 id="headline-90-2" class="ct-headline">Fire Sprinkler Installation</h1>
</div>

调整后的完整CSS代码 #

body
{
    background: #eee; /* 方便元素展示 */
}

div#div_block-89-2.ct-div-block { 
    align-items: flex-start;
    background-image: url("https://fireguardians.com/wp-content/uploads/2021/10/xUntitled-design-82.png.pagespeed.ic.Mko3_9o9wR.webp");
    /* 调整背景尺寸，宽度设为120%预留横向滚动空间 */
    background-size: 120% auto;
    /* 初始背景位置，水平0，垂直居中 */
    background-position: 0% center;
    /* 固定背景避免随容器滚动 */
    background-attachment: fixed;
    box-sizing: inherit;
    color: #404040;
    display: flex;
    flex-flow: column nowrap;
    font-family: "Roboto Slab";
    height: 330px;
    justify-content: center;
    line-height: 25.6px;
    text-align: center;
    width: 100%;
    /* 超出部分隐藏 */
    overflow: hidden;
}

h1#headline-90-2.ct-headline { 
    box-sizing: inherit;
    color: #ffffff;
    font-family: "Roboto Slab";
    font-size: 55px;
    font-weight: 700;
    line-height: 1;
    margin: 0px;
    margin-left: 150px;
    text-align: center;
}

@media not all, not all { 
    div#div_block-89-2.ct-div-block { 
        max-width: 100%;
        min-height: 1px;
    }

    h1#headline-90-2.ct-headline { 
        max-width: 100%;
        min-height: 1px;
    }

}

需要补充的JS代码 #

你可以直接在Oxygen Builder的自定义脚本板块添加如下代码：

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取目标容器
  const bgContainer = document.getElementById('div_block-89-2');
  if (!bgContainer) return;
  // 计算页面滚动比例
  const scrollY = window.scrollY;
  const windowHeight = window.innerHeight;
  const containerOffsetTop = bgContainer.offsetTop;
  const containerHeight = bgContainer.offsetHeight;
  // 计算背景水平偏移比例，可调整系数修改滚动速度
  const scrollPercent = (scrollY - (containerOffsetTop - windowHeight)) / (containerHeight + windowHeight);
  const offsetX = Math.max(0, Math.min(20, scrollPercent * 20)); // 偏移范围0-20%，对应背景多出的20%宽度
  // 设置背景水平位置
  bgContainer.style.backgroundPositionX = `${offsetX}%`;
});

自定义调整说明 #

• 要是觉得背景滚动速度不符合预期，可以修改JS代码里scrollPercent * 20中的20这个数值，数值越大滚动速度越快
• 要是想要更大的滚动范围，可以把CSS里的background-size: 120% auto的120%调整为更大的数值，同时对应修改JS里的Math.min(20的20为对应超出的比例值即可

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