Scrollytelling Template

面向减碳叙事的
全屏交互框架

纯 HTML/CSS/JS · 无依赖 · 支持滚动章节、粘性面板与项目卡片。保留法律链接位,方便合规上线。

我们的使命

这是一个原创的前端模板,复刻的是结构与交互模式,而非任何第三方网站的视觉素材或代码。 你可以将其用于学术传播、项目展示或企业专题页:全屏章节、滚动叙事、粘性内容与时间线一应俱全。

从排放到封存:三步法

向下滚动以浏览要点

01 · 源头识别

识别关键排放环节与数据口径,建立统一的基线与度量体系。

02 · 捕集与处理

部署可扩展的捕集/净化流程,兼顾能效与稳定性。

03 · 运输与封存

通过管输/航运将 CO₂ 安全送达封存或利用端,形成闭环。

项目精选

北海示范项目

全流程示范:从捕集到海底封存,提供端到端的运营经验。

查看详情

工厂改造计划

在存量设备上实施可插拔方案,降低停机成本,与能效改造协同。

技术白皮书

CCUS 开放数据

发布标准化的工况/能耗/成本数据集,助力科研复现与决策评估。

数据平台

项目分布(示意)

标记为示意点。实际项目请替换为你的地理数据或插图。

常见问题(FAQ)

可以直接商用吗?

可以。模板使用 MIT 许可。请替换占位文本/图形,加入你的版权与隐私政策。

如何替换为视频背景?

.hero-media 内的占位元素换成 <video autoplay muted loop playsinline src="your.mp4"> 即可。

如何在“流程”里做粘性切换?

本模板用 IntersectionObserver 给每个 .step 添加 .visible,你也可以扩展为图文联动、数字计数等。