【新春创造营】马年俗文字时间轴
项目介绍
丙午马年・春节年俗文字时间轴 是一个纯文字交互的年俗科普项目，围绕马年专属春节年俗制作了横向滑动时间轴。
核心亮点
-
完整覆盖腊月二十三到正月十五的年俗时间线 -
电脑端点击交互 + 
移动端滑动切换 -
纯文字展示，无图无声，聚焦内容本身 -
红金配色高亮，年味十足 -
随机年俗功能，增加探索趣味性
核心功能
-
时间轴导航：横向时间轴展示所有年俗节点
-
详情展示：点击/滑动到对应节点显示年俗介绍
-
马年小知识：每个年俗附带马年专属小知识
-
随机跳转：一键随机查看年俗
-
动画效果：切换时的淡入淡出动画
实现过程
1. 技术选型
-
单 HTML 文件，无需构建工具
-
原生 HTML + CSS + JavaScript
-
纯前端实现，零依赖
2. 核心实现
HTML 结构
<div class="container">
<div class="title">...</div>
<div class="timeline-container">...</div>
<div class="custom-display">...</div>
<button class="random-btn">🎲 随机年俗</button>
</div>
CSS 亮点
-
overflow-x: auto实现横向滚动 -
-webkit-overflow-scrolling: touch优化移动端滑动 -
keyframes实现淡入淡出动画 -
红金配色高亮选中状态
JS 交互逻辑
// 年俗数据数组
const horseYearCustoms = [
{
date: '腊月二十三',
name: '糖瓜粘',
intro: '...',
horseTip: '马年糖瓜粘，寓意粘住福气，马到成功万事甜！'
},
// ... 23个年俗数据
];
// 点击事件
item.addEventListener('click', () => showCustom(index));
// 触摸滑动事件
wrapper.addEventListener('touchmove', (e) => {
wrapper.scrollLeft += diffX;
});
页面预览
主页面
体验链接
线上体验：马年俗文字时间轴
好像地区不同词就不一样
