G1 Components

Appearance

IntroScroll 卷轴简介 ​

全屏卷轴介绍层，基于 WebGPU + CSS3DRenderer，支持皱纸效果与燃烧消散动画。

基础用法 ​

点击按钮打开卷轴，拖拽纸面可旋转视角，点击"确定"触发燃烧消散。

html
<g1-intro-scroll id="scroll">
  <div slot="header">标题</div>
  <p>正文内容</p>
  <div slot="footer">
    <button id="btn-confirm">确 定</button>
  </div>
</g1-intro-scroll>

自定义纸张尺寸 ​

通过 scroll-width、scroll-height 调整卷轴宽高比例。

html
<g1-intro-scroll scroll-width="2.6" scroll-height="2.0" />

调整内容区比例 ​

content-ratio 控制平铺内容区占总高度的比例，其余分配给两端卷边。值越小卷边越夸张。

html
<!-- 卷边更夸张 -->
<g1-intro-scroll content-ratio="0.5" />

<!-- 内容区更大 -->
<g1-intro-scroll content-ratio="0.95" />

燃烧速度 ​

burn-speed 控制燃烧蔓延快慢，值越大燃烧越快，默认 0.46。

html
<!-- 慢速燃烧 -->
<g1-intro-scroll burn-speed="0.15" />

<!-- 快速燃烧 -->
<g1-intro-scroll burn-speed="1.5" />

禁用旋转控制 ​

enable-controls 设为 false 关闭鼠标 / 触摸拖拽旋转。

html
<g1-intro-scroll :enable-controls="false" />

API ​

Attributes ​

属性名说明类型默认值
burn-speed燃烧蔓延速度number0.46
enable-controls是否旋转booleantrue
scroll-width纸张宽度number1.8
scroll-height纸张总高度number2.4
content-ratio内容区占总高度比例（0 ~ 1），剩余平均分配给两端卷边number0.8

Methods ​

方法名说明参数返回值
ignite()触发燃烧消散，结束后派发 g1-intro-burned 事件，约 200ms 后自动移除—void

Events ​

事件名说明
burn燃烧动画开始时触发

Slots ​

插槽名说明
header页眉区域，固定高度，不参与内容滚动
default主体内容区，高度超出时自动出现滚动条
footer页脚区域，固定高度，不参与内容滚动

CSS Variables ​

变量名说明
--g1-scroll-bg背景遮罩渐变