这是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标注、键盘可操作的全部交互、清晰的对比度。