Shopify模版二次开发 Liquid实现响应式无缝跑马灯效果
2023-12-14 05:43:15
1、HTML 代码结构
要实现无缝,我们需要复制出文案结构放在后面
<div class="marquee__wrapper">
<div class="marquee">
<div class="marquee__content">
<p>有人知道在 Shopify 中使用@media 的正确方法吗?</p>
<p>有人知道在 Shopify 中使用@media 的正确方法吗?</p>
</div>
</div>
</div>
效果
2、CSS 处理布局,使第二段文案衔接在第一段文案后面
代码
SCSS
// 演示使用,后面要删除
// 相当可视区域
.marquee__wrapper {
width: 375px;
margin: 100px auto 0;
// overflow: hidden;
}
// 核心代码
.marquee {
width: 100%;
background: rgba(0, 0, 0, 0.1);
.marquee__content {
display: inline-block;
white-space: nowrap;
position: relative;
p {
margin: 0;
// 插入一个字符,用于间隔开首尾
&::after {
content: "";
width: 15.5px;
display: inline-block;
}
}
p:last-child {
position: absolute;
left: 100%;
top: 0;
color: red;
}
}
}
3、添加CSS动画
代码
SCSS
.marquee__content {
// --marquee-time 动画时间, 默认10s
animation: marquee var(--marquee-time, 10s) linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
添加 overflow: hidden;
Liquid + CSS 实现响应式无缝跑马灯
备注
由于每个字符的宽度都不是固定的,所以文案宽度会存在一定的误差(误差大小取决于你怎么取文案平均值)。字符宽度的取值可以取一段文案的平均值,至于怎么取就不用多说了。如果你的字体大小还受到分辨率影响,那么就考虑手动设置文案宽度,或者再做一些细致的计算
代码
Liquid
{%- liquid
assign text = "有人知道在 Shopify 中使用@media 的正确方法吗?"
# 一个字的宽度
assign one_text_width = 14
# 文案字符数
assign text_length = text | size
# 文案宽度 == .marquee__content 的宽度
assign text_width = text_length | plus: 1 | times: one_text_width
# 跑马灯的时间, 可通过这个调节跑马灯的速度
assign marquee_time = text_width | times: 15
-%}
<!-- 文案宽度能够完全显示时,取消动画,删除间隔,隐藏复制的文案 -->
<style>
@media (min-width: {{ text_width }}px) {
#shopify-section-{{ section.id }} .marquee__content {
animation: none;
}
#shopify-section-{{ section.id }} .marquee__content p::after {
content: none;
}
#shopify-section-{{ section.id }} .marquee__content p:last-child {
display: none;
}
}
</style>
<div class="marquee__wrapper">
<div class="marquee" style="--marquee-time: {{ marquee_time }}ms">
<div class="marquee__content">
<p>{{ text }}</p>
<p>{{ text }}</p>
</div>
</div>
</div>
文章来源:https://blog.csdn.net/withkai44/article/details/134974166
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!