Shopify模版定制: 纯CSS和Liquid实现响应式无缝跑马灯

概要

使用纯CSS来解决各种效果是各前端工程师最喜爱的方式。本题将介绍如何使用纯CSS和Liquid实现响应式无缝衔接跑马灯。下面将分为通过 纯CSS和HTML实现无缝跑马灯 和 使用 Liquid 和 CSS 实现响应式跑马灯 两个步骤来实现这一功能

效果

纯CSS + HTML 实现无缝跑马灯

1、HTML 代码结构

要实现无缝，我们需要复制出文案结构放在后面

代码

HTML

<div class="marquee__wrapper">
  <div class="marquee">
    <div class="marquee__content">
      <p>温柔的晚风，傍晚的晚霞，冒泡的可乐，人间的美好多着呢，你要相信你配得上世间所有的温柔。</p>
      <p>温柔的晚风，傍晚的晚霞，冒泡的可乐，人间的美好多着呢，你要相信你配得上世间所有的温柔。</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 = "温柔的晚风，傍晚的晚霞，冒泡的可乐，人间的美好多着呢，你要相信你配得上世间所有的温柔。" 
  # 一个字的宽度
  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>

效果