Skip to Content
@anker-in/headless-ui 2.0 is released 🎉
业务组件🌟 通用组件标语

Slogan (标语)

品牌口号展示组件，支持GSAP滚动动画和智能轮播。【✅ 已发布】

加载中...
当前视口: 1920px × 600px场景: 三特性展示
打开链接

功能特性

  • ✅ 滚动动画 - 标题文字逐词淡入的GSAP SplitText动画效果
  • ✅ 特性展示 - 支持展示多个品牌核心数据或特性
  • ✅ 智能轮播 - 特性数量超过阈值时自动启用垂直轮播
  • ✅ 无缝循环 - 轮播模式下自动无缝循环滚动
  • ✅ 响应式设计 - 不同屏幕尺寸自动调整字体和布局
  • ✅ 语义化标签 - 支持h1-h6标签，利于SEO优化
  • ✅ 曝光埋点 - 内置曝光追踪功能
  • ✅ 富文本支持 - 标题和特性文本支持HTML格式（如换行<br>）
  • ✅ 性能优化 - 使用IntersectionObserver仅在可见时触发动画

Props 参数

SloganProps

Prop类型默认值必需说明
dataSloganData-✅口号数据配置对象
classNamestring''-自定义根容器类名

SloganData 配置

参数类型默认值必需说明
titlestring-✅品牌口号标题（支持HTML）
featuresFeature[][]-特性列表数据
tag'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h1'-标题使用的HTML标签
featureChunkSizenumber3-特性分组大小（每页显示数量）
themeTheme--主题模式

Feature 对象

参数类型必需说明
titlestring✅特性标题/文本（支持HTML）

使用示例

最简示例

import { Slogan } from '@anker-in/headless-ui/biz'
 
<Slogan
  data={{
    title: "The World's No.1 Mobile Charging Brand*",
    features: [
      { title: '47%<br/>R&D Employees' },
      { title: '100 Million<br/>Global Customers' },
      { title: 'Pioneering in Charging<br/>Technology for 12 Years' },
    ],
  }}
/>

基础品牌口号

<Slogan
  data={{
    title: "The World's No.1 Mobile Charging Brand*",
    features: [
      { title: '47%<br/>R&D Employees' },
      { title: '100 Million<br/>Global Customers' },
      { title: 'Pioneering in Charging<br/>Technology for 12 Years' },
    ],
  }}
/>

单个特性展示（无轮播）

<Slogan
  data={{
    title: 'Innovation at the Core',
    features: [
      { title: '12 Years of Excellence' },
    ],
  }}
/>

多特性轮播

<Slogan
  data={{
    title: 'Trusted by Millions Worldwide',
    features: [
      { title: '47%<br/>R&D Employees' },
      { title: '100 Million<br/>Global Customers' },
      { title: 'Pioneering in Charging<br/>Technology for 12 Years' },
      { title: '1000+<br/>Patents Granted' },
      { title: '200+<br/>Countries Served' },
      { title: 'Award-Winning<br/>Innovation' },
    ],
    featureChunkSize: 3, // 每页显示3个特性
  }}
/>

使用语义化标签

<Slogan
  data={{
    title: 'Our Core Values',
    tag: 'h2', // 使用h2标签而不是默认的h1
    features: [
      { title: 'Quality First' },
      { title: 'Customer Focused' },
      { title: 'Innovation Driven' },
    ],
  }}
/>

自定义分组大小

<Slogan
  data={{
    title: 'Key Highlights',
    features: achievements, // 8个特性
    featureChunkSize: 4, // 每页显示4个特性（2页轮播）
  }}
  className="bg-gray-50 py-16"
/>

响应式行为

断点说明

组件在不同设备上的字体和布局调整：

断点屏幕宽度标题字体特性字体布局方向
Mobile< 1025px40px12px垂直排列
Laptop≥ 1025px40px14px水平排列（标题左，特性右）
Desktop≥ 1440px48px14px水平排列
LG Desktop≥ 1920px64px14px水平排列

智能轮播逻辑

组件会根据特性数量自动决定是否启用轮播：

  • 特性数量 ≤ featureChunkSize（默认3）: 静态显示，不启用轮播
  • 特性数量 > featureChunkSize: 启用垂直轮播，每3秒自动切换

滚动动画

  • 标题动画: 当标题进入视口时，文字逐词淡入（从左到右，0.5重叠）
  • 特性动画: 标题动画完成后，特性区域整体淡入
  • 触发位置: 标题距离视口底部4%时开始动画

设计规范

标题要求

  • 长度: 建议30-80个字符
  • 换行: 使用&lt;br&gt;手动控制换行，保持良好的可读性
  • 语气: 积极、自信、简洁有力
  • 示例:
    • “The World’s No.1 Mobile Charging Brand*”
    • "Innovation That<br />Powers Your Life"
    • "Trusted by 100 Million+<br />Global Customers"

特性文本要求

  • 格式: 通常使用”数字 + 单位 + 描述”的格式
  • 换行: 建议使用&lt;br&gt;将数字和描述分成两行
  • 简洁性: 每个特性建议不超过30个字符
  • 示例:
    • "47%<br />R&D Employees"
    • "100 Million<br />Global Customers"
    • "12 Years<br />of Excellence"

特性数量建议

  • 最少: 0个（仅显示标题）
  • 静态展示: 1-3个特性（不启用轮播）
  • 轮播模式: 4-9个特性（推荐）
  • 最多: 建议不超过12个（避免轮播时间过长）

无障碍性

语义化标签

  • ✅ 使用语义化HTML标签（h1-h6可配置）
  • ✅ 文字颜色对比度符合WCAG AA标准
  • ✅ 支持富文本HTML，保持结构清晰
  • ✅ GSAP动画使用scrub模式，跟随滚动，用户可控

建议改进

  • 添加aria-live="polite"用于轮播内容更新通知
  • 为轮播添加暂停按钮（可选）

性能优化

  • ✅ Ref转发 - 使用React.forwardRef()支持ref转发
  • ✅ Ref优化 - 使用useImperativeHandle()优化ref暴露
  • ✅ IntersectionObserver - 使用react-intersection-observer仅在可见时触发GSAP动画
  • ✅ GSAP ScrollTrigger - 使用scrub模式，性能优于JavaScript定时器
  • ✅ 智能轮播 - 仅在需要时启用定时器
  • ✅ 清理机制 - 组件卸载时自动清理ScrollTrigger和SplitText实例

GSAP 性能说明

组件使用GSAP的SplitText和ScrollTrigger插件，这是业界领先的动画库：

  • SplitText: 将文本拆分为单词，实现逐词动画
  • ScrollTrigger: 滚动驱动动画，性能优异
  • scrub模式: 动画进度与滚动位置同步，无延迟

常见问题

标题文字为什么是逐词淡入？

组件使用GSAP的SplitText插件将标题拆分为单词，然后根据滚动进度逐词淡入。这种渐进式动画可以吸引用户注意力，增强品牌感。

如何禁用滚动动画？

当前版本滚动动画是内置的，无法直接禁用。如需禁用，可以修改源代码注释掉GSAP相关逻辑。

轮播什么时候会启用？

轮播仅在features.length > featureChunkSize时启用。默认featureChunkSize为3，即特性数量大于3个时启用轮播。

可以自定义轮播速度吗？

当前轮播间隔固定为3秒（3000ms），过渡动画500ms。如需自定义，可以修改源代码中的setInterval(..., 3000)参数。

特性之间的分隔线能自定义吗？

可以。分隔线使用.slogan-feature-divider类，默认为1px宽的浅灰色线（#E4E5E6）。你可以通过全局CSS覆盖该类的样式。

为什么特性文本使用line-clamp-3？

line-clamp-3限制特性文本最多显示3行，超出部分截断。这是为了保持视觉整齐，避免内容过长破坏布局。

如何在标题中添加换行？

使用HTML的&lt;br&gt;标签：

<Slogan
  data={{
    title: "The World's No.1<br />Mobile Charging Brand*"
  }}
/>

可以同时展示标题和特性的背景颜色吗？

组件默认背景是透明的。你可以通过className传入自定义背景色：

<Slogan
  data={{ title: '...', features: [...] }}
  className="bg-gray-100 p-8 rounded-lg"
/>

特性轮播是否支持手动控制？

当前版本不支持手动控制（如点击切换）。轮播完全自动化，每3秒切换一页。

如何选择合适的HTML标签（tag）？

  • h1: 页面主标题（每页仅一个）
  • h2: 页面子标题或区块标题
  • h3-h6: 更小的标题层级

选择合适的标签有利于SEO和可访问性。

技术实现

基于 GSAP

组件基于GSAP (GreenSock Animation Platform) 实现，使用以下插件：

  • SplitText: 文本拆分工具，将标题拆分为单词
  • ScrollTrigger: 滚动触发器，监听滚动位置控制动画

关键逻辑

// 智能轮播逻辑
const needCarousel = features.length > featureChunkSize
 
// 仅在需要时启用定时器
React.useEffect(() => {
  if (!needCarousel) return
  const timer = setInterval(() => {
    setGroupIndex(i => i + 1)
    setIsTransitioning(true)
  }, 3000)
  return () => clearInterval(timer)
}, [totalGroups, needCarousel])
 
// 无缝循环处理
const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups
 
// GSAP滚动动画
useEffect(() => {
  gsap.registerPlugin(ScrollTrigger, SplitText)
 
  if (inView) {
    // 拆分标题文本为单词
    splitTextInstance.current = new SplitText(titleRef.current, {
      type: 'words',
      wordsClass: 'word',
    })
 
    const words = splitTextInstance.current.words
    gsap.set(words, { opacity: 0 })
 
    // 创建滚动触发器
    scrollTriggerRef.current = ScrollTrigger.create({
      trigger: titleRef.current,
      start: 'bottom bottom-=4%',
      end: `bottom+=${height * 1.5}px bottom-=4%`,
      scrub: true,
      onUpdate: (self: any) => {
        const progress = self.progress
        words.forEach((word: any, i: number) => {
          const start = (i / total) * (1 - overlap)
          const width = interval * (1 + overlap)
          let opacity = (progress - start) / width
          opacity = Math.max(0, Math.min(opacity, 1))
          gsap.set(word, { opacity })
        })
      },
    })
  }
 
  // 组件卸载时清理
  return () => {
    splitTextInstance.current && splitTextInstance.current.revert()
    scrollTriggerRef.current && scrollTriggerRef.current.kill()
  }
}, [inView])

相关资源

Last updated on
次级横幅间距