✨ 创意图文模块

创意互动展示组件，提供吸引眼球的动态展示效果。

组件列表 (4个)

#	组件	中文名称	Figma 链接	状态
1	AccordionCards	百叶窗	查看设计稿	已经发布
2	MediaSceneSwitcher	多场景切换1	查看设计稿	已经发布
3	ProductCompare	对比模块	查看设计稿	已经发布
4	ThreeDCarousel	轮播	查看设计稿	已经发布

使用场景

创意图文模块适用于：

✅ 产品特性展示
✅ 场景化营销
✅ 产品选购对比
✅ 视觉吸引

交互特点

动态效果 - 鼠标悬停、滚动触发动画
沉浸式体验 - 3D、视差等视觉效果
交互引导 - 引导用户主动探索
信息密度高 - 在有限空间展示更多内容

导入方式


import {
  AccordionCards,
  MediaSceneSwitcher,
  ProductCompare,
  ThreeDCarousel
} from '@anker-in/headless-ui/biz'
 
export default function CreativePage() {
  return (
    <>
      <ThreeDCarousel data={carouselData} />
      <MediaSceneSwitcher data={scenesData} />
      <ProductCompare data={compareData} />
      <AccordionCards data={accordionData} />
    </>
  )
}

性能优化

✅ 使用 CSS transform 而非 position 动画
✅ 懒加载图片和视频资源
✅ 防抖和节流事件处理
✅ 使用 will-change 优化动画性能

← 返回组件总览