Elementor Marquee:无限滚动文本、徽标和勾选

跑马灯是连续向一个方向滚动,永不停歇的内容:没有箭头,没有点,没有滑动边界。旧的 <marquee> HTML标签已经死了很多年,但效果在2021年左右回来了,现在已经出现在你将访问的一半代理网站上。

在 Elementor 中构建一种的三种方法:免费 徽标 徽标滑块小部件的,该 新闻股票代码 对于文本,或者大约十二行 CSS,如果你想在小部件未覆盖的东西上。选框确实是一个 旋转木马小部件 stops被移除,这就是为什么三种方法中的两种从一种。以下所有三种,以及决定您的循环是否干净或明显卡住的细节。

让帐篷看起来破损的一件事

从这里开始,因为这是大多数手工制作的帐篷看起来错误的原因。

幕(marquee)是一条内容,向左滑动直到屏幕外,然后跳回开始,如果只有一个内容副本,你就会得到一个空隙,尾巴离开,空白的地方直到头部再次转过来。

修复方法是复制轨道。两个相同的副本并排,在正好一个副本的宽度上进行动画处理。当动画重置时,副本二正好位于副本一所在的位置,并且跳跃是不可见的。

That is it。就是整个技术,你见过的每一个循环流畅的跑马灯都在做这个,每一个结巴的都不是。

方法 1:带有免费徽标滑块的徽标大帐篷

如果您正在滚动客户端徽标,这是大多数选框的目的 徽标滑块小部件 CSS就做。在免费插件里。

1. 将徽标滑块拖到页面上 并在中继器中添加您的徽标,每行一行,并带有可选链接。
2. 打开旋转木马设置 然后打开自动播放,然后打开无限循环。
3. 将自动播放延迟设置为 0。 Zhe就是把转盘变成跑马灯的开关, 延迟为零, 意味着它Bu会在滑道上停顿, 所以运动就变成连续的, 而不是步进的。
4. 将速度设置为慢速, 4000到6000ms,当跑马灯比你预期的慢时,读起来很平静,快的看起来像是错误状态。
5. 关闭箭头和点。 跑马灯上的导航是矛盾的;没有什么可以导航的。
6. 关闭悬停暂停 如果您希望它真正连续,或者如果徽标可点击,请保留它。

Slides-per-view控制密度,六台桌面,三台平板,两台移动,让标志清晰可辨,不要掉到一个,因为一次显示单个标志的跑马灯就停止了条状读取。

Logo条造型的更多内容, 包括灰度悬停处理以及如何平衡不匹配的logo尺寸: 标志旋转木马演练。关于自由层中的其他内容,请参阅 免费旋转木马小部件故障.

方法 2:带有新闻勾选符的文本选框

为滚动文本(公告,头条新闻,股票股票条)新闻股票股票小部件是专门构建的选项。这是一个专业小部件。

它处理手卷文本选框出错的事情:它可以从帖子查询而不是静态列表中提取内容,因此“最新新闻”股票代码会自我更新,并且它在左侧有一个固定的标签块,当内容滚动经过它时,它会保留该标签,使股票代码读作股票代码而不是漂移文本的细节。

Widget 的设置中设置方向、速度和暂停行为, 值得做的两件事:

• 暂停悬停,开启。 如果头条新闻是链接,人们就需要一个固定的目标。
• 保持物品短。 90个字符标题的股票代码需要很长时间才能循环,以至于没有人看到第四项。截断到50个字符左右。

如果您真正想要的是在没有卷轴的情况下移动文本,一个标题中单词就地旋转,那么 动画头条新闻小部件 是比任何大帐篷更贴合。

方法 3:使用 CSS 构建一个

对于任何小部件未涵盖的内容(一条推荐引言、一排图标、混合内容),选框是十二行 CSS。将标记放入 HTML 小部件中,并将 CSS 放入 Elementor 的自定义 CSS 字段或您的孩子主题中。

<div class="ma-marquee">
  <div class="ma-marquee__track">
    <span>Item one</span><span>Item two</span><span>Item three</span>
    <span>Item one</span><span>Item two</span><span>Item three</span>
  </div>
</div>

Note 内容出现两次,那是前面重复的曲目,不是复制粘贴错误。

.ma-marquee {
  overflow: hidden;
}
.ma-marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
  animation-play-state: paused;
}
@keyframes ma-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ma-marquee__track { animation: none; }
}

其中有四件事很重要:

• translateX(-50%) zuo轨正好移动一个副本的宽度,因为轨道是两个副本,zhe就是让循环看不见的原因。
• linear不是 ease.缓和的跑马灯每个周期都加速和减慢,看起来像个bug。
• width: max-content 停止柔性轨道缠绕。
• 简化运动查询 isn’t可选的连续水平运动是记录在案的偏头痛和前庭触发器,而大帐篷是现代网络上最常见的单一罪犯。尊重设置。

要扭转方向,请从动画中进行动画处理 translateX(-50%) 到 0.垂直的,换成 translateY 并设置容器高度。

跑马灯应该移动多快?

比本能说的要慢。一个好的起点是 30 秒,一个六项轨道的完整周期,这在编辑器中感觉几乎太慢,并且在实时页面上读起来很自信。

The test: 访客能不能在不用眼睛追踪的情况下阅读一个项目,如果他们必须跟随移动,速度太快,整个条形成为可以远离的东西。

Logo可以比文字走得更快,因为一个logo是被识别的而不是被读取的,文字需要大约是停留时间的两倍,一个阶梯式旋转木马是相反的情况,其中 自动播放通常是一个错误 因为这些项目是可点击的。

跑马灯对 SEO 或可访问性不利吗?

SEO,不。内容是DOM中的真实文本,可爬行和可索引。重复轨道意味着文本在源中出现两次,这值得了解,但在这种规模上不是重复内容的问题,因为在一个元素内部是一把字,如果它困扰你,标记第二个副本 aria-hidden="true"的,反正你应该这么做。

无障碍才是真正的考虑因素,真正的问题有三个:

• 运动敏感性。 由上面的缩减运动查询处理。不可协商。
• 移动链接目标。 如果项目可点击,请暂停悬停和聚焦。当有人伸手去拿时,滑开链接在精神上(如果不是文字上的话)会失败 WCAG 2.2 的目标大小期望。
• 屏幕阅读器读取两次。 重复的轨道会被宣布两次,除非你从可访问性树中隐藏第二个副本。一个属性修复了它。

这些都不会让跑马灯成为一个坏主意。它使未配置的跑马灯成为一个坏主意。

常见问题

使用哪种方法

Logo:免费的Logo滑块,自动播放延迟零。两分钟内完成,它为您处理响应密度。

二十个都没有 小部件生成器 设计是一个大帐篷,因此徽标滑块仍然是这项工作的工具。 定价页面 如果您想要专用版本,请显示新闻滴答声所在的位置。

滚动标题:新闻滴答声,因为查询源和固定标签本身就值得获得许可。

Anything else: CSS。它很短,它是你的,没有什么可以弃用它。独立的滑块构建器也可以做连续的轨道,并且 的滑块插件比较 涵盖了页面成本。

所有旋转木马和滑块小部件,包括执行大帐篷任务的小部件,都收集在 元素轮播小部件 页面,以及 20个可进口的旋转木马和滑块设计,其中8个免费,如果你的跑马灯在缓存插件更新后行为不端,修复 swiper 滑块故障排除指南 也在这里申请。