北京
这是Frontend Challenge「舒适食物」专题的参赛作品——一个关于孟买街头小吃Vada Pav的滚动驱动电影感着陆页。
「我们十到十五个人从RMD Sinhgad工程学院走出来，书包里塞着没人翻开过的课本，直奔Warje Vada Pav中心。那时候的我们总是没钱——不是文艺作品里那种浪漫的穷，而是真要数硬币凑公交车费、差几块钱就得走路的穷。但₹15就能填饱肚子，每个傍晚都是如此。」
「我现在挣的是百万级年薪，但没有一样东西能带来那种满足。这个页面献给Warje Vada Pav中心，也献给每一个曾站在那个圈子里的人。」
页面包含什么
完整的叙事线：起点（Journey）、市井故事（Origin）、制作工艺（Build）、食谱（Recipe）、文化（Culture）……一次完整的Vada Pav体验。
设计思路：不用框架，刻意为之
没有React、没有Tailwind、没有构建步骤。单个index.html加styles.css，打开文件就能跑。这种限制反而逼出了更好的设计决策。
整页沉浸于一种情绪：孟买的夜晚。钨丝灯泡的暖光，深海军蓝背景上点缀藏红花色。章节之间没有刺眼的色调切换。
字体设计承担了最重的表达任务。你首先看到的是巨大的Playfair Display字体排出的「₹15」——没有英雄图轮播，没有滑块，只有价格，因为这才是Vada Pav的全部意义。
技术亮点
- 导航淡入：₹15始终固定在右上角；链接（起源、制作、食谱、文化）在滚动时用requestAnimationFrame配合缓动插值按比例淡入。
- 交互式组装器：采用ARIA tablist模式，支持键盘导航。每一步切换图片、更新描述，进度条同步填充。五个步骤：Pav、绿酸辣酱、Vada、蒜蓉辣酱、炸青辣椒。
- 食谱缩放器：服务人数从1调到8，所有食材用量通过data-base属性即时重新计算。
- 滚动揭示：IntersectionObserver在区块进入视口时触发.reveal动画。
从第一天就内置，而非事后补救：语义化HTML5、完整的ARIA标注、键盘可操作的全部交互、清晰的对比度。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
