如何在WordPress中实现CSS垂直无限滚动动画效果

1. 插入HTML结构 #

在你当前使用的WordPress主题的头部模板（通常为header.php文件）中，添加滚动公告栏的结构：

<div class="vertical-scroll-notice">
  <div class="scroll-items-wrapper">
    <div class="scroll-item">全场满299元免运费</div>
    <div class="scroll-item">新用户首单立减15元</div>
    <div class="scroll-item">季末限定款低至5折</div>
    <!-- 按需添加更多滚动内容项 -->
    <!-- 为了无缝衔接，下面复制一份完全相同的内容项 -->
    <div class="scroll-item">全场满299元免运费</div>
    <div class="scroll-item">新用户首单立减15元</div>
    <div class="scroll-item">季末限定款低至5折</div>
  </div>
</div>

你可以根据需求修改每个scroll-item内的文本、甚至插入图片等内容。

2. 添加核心CSS样式 #

登录WordPress后台，依次进入「外观」-「自定义」-「额外CSS」，粘贴以下样式代码：

/* 滚动外层容器 */
.vertical-scroll-notice {
  width: 100%;
  height: 40px;
  overflow: hidden;
  background-color: #f8f8f8;
}

/* 滚动内容包裹层，绑定动画 */
.scroll-items-wrapper {
  animation: verticalScroll 6s linear infinite;
}

/* 单个滚动项样式 */
.scroll-item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #333;
  font-size: 14px;
}

/* 定义垂直滚动动画 */
@keyframes verticalScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 位移值 = 单个滚动项高度 * 原始内容项数量，这里3个项就是40*3=120px */
    transform: translateY(-120px);
  }
}

可以根据自己的设计需求调整容器高度、背景色、文字样式、动画时长等参数，内容项越多建议设置的动画时长越长，滚动速度会更平缓。

3. 可选：悬浮暂停功能 #

如果需要实现鼠标悬浮在滚动栏上时暂停滚动、离开后继续滚动的效果，可以将以下JS代码添加到主题的footer.php文件</body>标签之前，或者通过WordPress自定义HTML插件插入到页面底部：

const scrollWrap = document.querySelector('.scroll-items-wrapper')
// 悬浮暂停
scrollWrap.addEventListener('mouseenter', () => {
  scrollWrap.style.animationPlayState = 'paused'
})
// 离开继续
scrollWrap.addEventListener('mouseleave', () => {
  scrollWrap.style.animationPlayState = 'running'
})

常见问题排查 #

• 如果滚动出现跳帧，检查是否已经复制了一份完全相同的内容项，保证首尾内容衔接一致
• 修改后看不到效果的话，清空WordPress缓存和浏览器缓存后再刷新
• 移动端适配可以通过媒体查询调整容器高度、文字大小和动画时长

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