【前端作品】水墨丹青 · 千秋人物志 —— 苏轼传记

【前端作品】水墨丹青 · 千秋人物志 —— 苏轼传记

一蓑烟雨任平生，千古文豪东坡魂

在线预览：苏轼传 · 千秋人物志

前言

一直想做一个具有中国传统文化韵味的人物传记网页，最终选择了苏轼作为第一个主题。苏轼的一生充满传奇色彩——少年得志、中年蒙冤、晚年流放，却始终保持旷达超脱的人生态度，这与水墨画的意境不谋而合。

项目采用纯前端技术实现，无任何后端依赖，数据结构清晰，便于二次开发。

作品展示

页面预览

整体风格：水墨画风格，以宣纸色为底，朱砂红点缀，墨色文字为主色调。

┌─────────────────────────────────────────┐ │ 【封面区域】 │ │ 苏轼传 · 千秋人物志 │ │ "竹杖芒鞋轻胜马，谁怕？" │ │ 一蓑烟雨任平生 │ └─────────────────────────────────────────┘ ↓ 滚动 ┌─────────────────────────────────────────┐ │ 【章节导航】 │ │ 少年立志 → 初入仕途 → 乌台诗案 → ... │ └─────────────────────────────────────────┘ ↓ 滚动 ┌─────────────────────────────────────────┐ │ 【人生时间线】 │ │ ○─────────○─────────○ │ │ 1037 1057 1079 │ │ 眉山降生 进士及第 乌台诗案 │ └─────────────────────────────────────────┘ ↓ 滚动 ┌─────────────────────────────────────────┐ │ 【章节详情】 │ │ ┌─────────────────────────────┐ │ │ │ 📜 章节标题 │ │ │ │ 年份范围 · 主题色 │ │ │ │ 章节描述 │ │ │ │ ┌─────────────────────┐ │ │ │ │ │ 🏛️ 事件卡片 │ │ │ │ │ │ 年份 · 标题 │ │ │ │ │ │ 事件描述 │ │ │ │ │ │ 【诗词赏析】（如有） │ │ │ │ │ └─────────────────────┘ │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────────┘ ↓ 滚动 ┌─────────────────────────────────────────┐ │ 【名篇展示】 │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │水调歌头 │ │念奴娇 │ │定风波 │ │ │ │明月几时 │ │赤壁怀古 │ │莫听穿林 │ │ │ │有 │ │ │ │打叶声 │ │ │ └─────────┘ └─────────┘ └─────────┘ │ └─────────────────────────────────────────┘

技术实现

技术栈

核心特性

1. 水墨风格设计系统

:root{/* 主色调 - 水墨风格 */--ink-dark:#1a1a1a;--ink-medium:#2c2c2c;/* 宣纸色系 */--paper-white:#faf8f5;--paper-cream:#f5f0e8;--paper-aged:#ebe4d8;/* 点缀色 - 朱砂红 */--vermilion:#c41e3a;--vermilion-light:#e63950;/* 字体 */--font-calligraphy:'Ma Shan Zheng',cursive;--font-serif:'Noto Serif SC',serif;}

2. 数据驱动架构

constsushiData={id:"sushi",name:"苏轼",birthYear:1037,deathYear:1101,chapters:[{id:1,title:"少年立志",subtitle:"1037-1056",color:"#4a6741",events:[{year:1037,title:"眉山降生",content:"...",highlight:true}]}]};

所有内容通过JSON数据配置，添加新章节仅需修改数据结构。

3. 滚动动画效果

constobserver=newIntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('visible');}});},observerOptions);document.querySelectorAll('.fade-in').forEach(el=>{observer.observe(el);});

4. 固定导航栏

window.addEventListener('scroll',()=>{constheader=document.getElementById('header');if(window.scrollY>80){header.classList.add('scrolled');}else{header.classList.remove('scrolled');}});

内容结构

六大人生章节

收录经典作品

• 《和子由渑池怀旧》
• 《江城子·乙卯正月二十日夜记梦》
• 《水调歌头·明月几时有》
• 《念奴娇·赤壁怀古》
• 《定风波·莫听穿林打叶声》
• 《赤壁赋》
• 《后赤壁赋》

设计亮点

1. 沉浸式阅读体验

• 大面积留白，模拟古籍阅读感
• 字号适中，行距宽松
• 章节间自然过渡

2. 精致的视觉细节

• 装饰性水墨渐变
• 悬浮卡片的柔和阴影
• 章节高亮的朱砂红标识

3. 响应式适配

• 桌面端：双栏时间线布局
• 平板端：单栏紧凑布局
• 移动端：底部导航栏、全宽卡片

4. 无障碍设计

• 语义化HTML标签
• 键盘导航支持
• 足够的颜色对比度

项目结构

sushi/ ├── index.html # 主页面 ├── css/ │ └── style.css # 样式文件（已内联） ├── js/ │ ├── data.js # 苏轼传记数据 │ └── main.js # 交互逻辑（已内联） └── README.md

延伸开发

更换人物

只需修改data.js中的数据结构：

constnewData={id:"new-person",name:"新人物名",birthYear:1900,deathYear:2000,cover:{quote:"代表名言",description:"人物简介"},chapters:[// 新章节数据]};

可扩展功能

• 添加诗词朗读功能
• 增加人物关系图谱
• 添加历史地图模块
• 支持暗色模式
• 添加多语言切换

结语

苏轼曾说："人生如逆旅，我亦是行人。"希望通过这个页面，能让更多人了解这位千古文豪的传奇一生，领略中华传统文化的魅力。

在线预览：苏轼传 · 千秋人物志