分割襟翼

主要观点:介绍了一个名为 Split Flap 的网页组件,它是对传统列车站标志的一种致敬,能提供独特的文本动画效果,包含多种属性可控制输出,还可通过 ::part() 伪元素进行样式定制,有国际化功能,可定时更换消息,未来对该组件的发展持开放态度,欢迎提出改进建议和报告 bug。
关键信息:

  • 可通过 <hotfx-split-flap> 自定义元素使用,需添加脚本,将消息包裹在其中即可开始过渡。
  • 接受 width(每行字符数)、height(行数)、speed(字符切换持续时间)等属性控制输出。
  • 利用 clip-path 等技术实现字符动画,通过 backface-visiblity: hidden 防止字母显示在元素背面。
  • 可用 ::part() 伪元素进行样式定制,有多种部分可操作,如 ::part(char)::part(flap) 等。
  • characters 属性可控制显示的字符集,可定时更换消息,对组件发展持开放态度,欢迎反馈。
    重要细节:
  • 费城 30 街车站的 Split Flap 板在 2019 年被拆除,该组件与之类似但有独特优势。
  • 若未指定高度和宽度,组件将取内部第一个消息的高度和宽度,更换消息时会截断以适应网格,第一个演示通过创建新元素解决此问题。
  • 可通过 GitHub 提交 bug 或功能请求,如希望实现整词显示在一个 flap 上等。
阅读 33
0 条评论