孟买旅游电影感滚动驱动网站

构建一个高级、电影感的单页网站，用于名为“孟买：永不停歇的城市”的孟买导览城市之旅。体验应像一部互动旅行电影，而非传统旅游网站，采用全屏粘性滚动序列、分层摄影、戏剧性景深、平滑视差移动、超大编辑式排版、沉浸式叙事和互动目的地卡片。 1. 核心视觉方向 打造受高端旅行纪录片和奢华编辑式旅游网站启发的电影感沉浸式视觉体验。 网站应结合： 全屏电影感孟买摄影 前景、中景和背景分层图像 滚动控制的叙事 基于景深的平滑视差 微妙的指针响应移动 大型优雅衬线字体 极简奶油色界面元素 氛围感黄金时刻照明 深阴影和暖高光 地点之间的平滑缩放 通过移动、缩放、模糊和不透明度实现无缝视觉过渡 高端编辑式旅行摄影 强视觉层级，极简界面干扰 避免通用旅游模板风格、过多卡片、渐变、霓虹色、卡通插图和传统盒式网站区块。 2. 英雄场景 以孟买黄金时刻的震撼全屏电影视野开场。 从多个视觉层构建场景： 背景： 孟买天际线、阿拉伯海、氛围天空、远处建筑和温暖日落薄雾。 中景： 印度门及周边历史建筑。 前景： 营造强烈电影景深的建筑或滨水元素。 放置一个巨大的居中衬线标题： MUMBAI 其下方： 印度梦想、故事、街道、海洋和永不停歇能量的城市。 添加三个奶油色胶囊标签： 遗产 街头生活 阿拉伯海 场景应微妙响应指针移动，使前景元素比远处元素移动更多。 当访客滚动时，MUMBAI 应缓慢上升、略微缩小并消失，同时前景建筑向观者扩展。 3. 导航 创建覆盖在电影场景上的透明导航栏。 左侧： Mumbai Experiences 居中导航： 探索 地标 文化 游览 预订 右侧： EN ⌄ 使用优雅的奶油色字体，间距宽松。 保持导航视觉轻盈，使摄影保持主导地位。 4. 滚动体验 创建一个长粘性电影舞台，滚动距离约 3,500 至 4,500 像素。 视口保持固定，而孟买在访客周围变换。 滚动应感觉像在孟买中物理穿行，而非在普通网页区块间移动。 对所有滚动控制动画使用插值和 smoothstep 风格缓动。 使用 requestAnimationFrame 实现平滑渲染。 在桌面端添加微妙滚动平滑和指针视差。 支持 prefers-reduced-motion，禁用惯性和指针视差，同时保留内容序列。 5. 场景一：印度门 以印度门主导构图开始。 滚动开始时： 英雄排版向上移动并淡出 前景建筑逐渐放大 背景以较慢速度移动 镜头似乎向印度门推进 氛围薄雾微妙增加 周围图层分离以营造景深 引入居中故事文案： 孟买与海相遇的门户。 支持文本： 自 1924 年起矗立于阿拉伯海畔，印度门至今仍是孟买最具代表性的地标之一，也是探索这座城市的完美起点。 其下方显示： 1924 门户竣工 20 世纪 孟买标志性滨水地标 保持排版优雅、极简、居中且具电影感。 6. 场景二：滨海大道 继续滚动进入向滨海大道的电影感过渡。 印度门前景应向外分离并移出视口，同时新的全屏海岸场景在下方浮现。 显示： 阿拉伯海 滨海大道海滨长廊 蜿蜒海岸线 装饰艺术建筑 以视觉呈现的流动车流 温暖日落倒影 城市灯光开始出现 对离场图层应用临时景深模糊，同时新场景变得清晰。 故事标题： 孟买在阿拉伯海畔呼吸。 支持文案： 沿着滨海大道的蜿蜒曲线前行，海风、装饰艺术建筑、日落、车流和城市生活在这条孟买最著名的海滨大道上交汇。 视觉过渡应像镜头穿过前一张照片进入滨海大道。 7. 场景三：贾特拉帕蒂·希瓦吉·马哈拉吉终点站 过渡到以贾特拉帕蒂·希瓦吉·马哈拉吉终点站为中心的建筑场景。 使用戏剧性的黄昏或黄金时刻摄影，突出： 哥特复兴建筑 石雕细节 塔楼和穹顶 孟买车流 历史街道 密集城市氛围 标题： 历史以孟买速度前行。 支持文本： 探索孟买最伟大的建筑地标之一，体验历史石雕与现代城市不停歇脉动之间的非凡对比。 使用前景车流或建筑元素营造强烈视差景深。 8. 场景四：孟买街头生活 从纪念性建筑过渡到孟买的人性尺度。 创建沉浸式街头构图，包含真实视觉参考，如： 卡拉戈达 科拉巴街道 本地咖啡馆 黑白出租车 街头小贩 历史立面 繁忙步行街 本地市场 标题： 真正的孟买生活在地标之间。 支持文案： 穿行于充满美食、建筑、市场、出租车、对话、咖啡馆和无数小故事的街道，感受孟买的独特个性。 保持呈现方式精致且具纪录片感，而非混乱。 9. 目的地探索器 在电影滚动接近尾声时，引入交互式水平目的地滑块。 滑块应从右侧戏剧性飞入视口。 创建大型奶油色圆角卡片、黑色字体、小类别标签、简洁描述和摄影或插画式地点标记。 卡片： 印度门 类别： 滨水地标 描述： 从孟买最著名的地标开始，俯瞰阿拉伯海。 滨海大道 类别： 海岸孟买 描述： 体验孟买著名的海滨大道和辽阔海景。 贾特拉帕蒂·希瓦吉·马哈拉吉终点站 类别： 建筑 描述： 探索孟买最壮观的历史铁路地标之一。 卡拉戈达 类别： 艺术区 描述： 探索遗产建筑、画廊、咖啡馆、博物馆和孟买的创意面。 科拉巴 类别： 历史街区 描述： 穿行于充满建筑、购物、咖啡馆和本地特色的活力街道。 多比加特 类别： 本地孟买 描述： 见证孟买最具特色的劳作地标之一，了解城市日常生活的另一层面。 卡片应以平滑惯性动画水平移动。 包含圆形上一页和下一页箭头控件。 通过克隆卡片组并在过渡后归一化滑块位置，实现无缝无限循环。 卡片必须支持鼠标、触摸和键盘交互。 10. 导览转化区块 在目的地序列之后，过渡到戏剧性的最终预订场景。 使用蓝色时刻的孟买天际线，配以发光建筑、海岸灯光、车流光轨和阿拉伯海。 大标题： 不要只是游览孟买。 去体验它。 支持文案： 通过连接地标、遗产、街道、建筑、文化和难忘海景的导览城市之旅，发现孟买。 主要行动号召： 预订您的孟买之旅 次要行动号召： 查看行程详情 按钮下方显示三个紧凑信任指标： 本地导览体验 孟买标志性亮点 精选城市路线 预订行动号召应是网站上最强的转化元素，同时保持极简编辑美学。 11. 交互设计 所有动态应感觉电影化而非装饰性。 使用滚动位置控制： 图层位移 图像缩放 场景不透明度 景深模糊 亮度 饱和度 故事面板可见性 前景分离 背景缩放 水平目的地卡片进入 指针移动应产生微妙视差。 前景元素响应应强于背景元素。 绝不让移动显得突兀或分散注意力。 动画应使用平滑插值而非突兀的 CSS 过渡。 12. 排版 主要标题和目的地叙事使用优雅的高对比度编辑式衬线字体。 导航、描述、标签、按钮和辅助信息使用简洁的现代无衬线字体。 MUMBAI 一词最初应以超大字体主导视口。 使用奶油色或暖米白色文本，而非纯白。 建议调色板： 奶油色：#FDF1E1 炭黑：#111411 深夜：#0B1110 阿拉伯海蓝：#4AB5E0 暖日落：#D99A55 克制使用色彩，让摄影定义大部分视觉调色板。 13. 技术要求 使用所要求的技术栈构建一个精致的响应式网站。 对于简单实现，使用： HTML CSS 原生 JavaScript 对于默认使用 React 的 AI 网站构建器，使用 React 组件重建相同架构，不改变视觉行为。 使用： position: sticky 实现电影舞台 CSS 自定义属性实现动画状态 requestAnimationFrame 实现滚动动画 transform: translate3d() 实现高性能移动 仅对动画元素使用 will-change 响应式 clamp() 尺寸 object-fit: cover 实现电影感摄影 分层 z-index 构图 smoothstep 插值实现场景进入和退出 GPU 友好变换 语义化 HTML 无障碍导航 描述性 aria-label 键盘可访问的目的地卡片 响应式桌面、平板和移动布局 除非平台要求，避免不必要的第三方动画库。 14. 响应式行为 桌面端应呈现完整的电影感分层体验。 平板端应保留相同滚动叙事，同时缩小超大排版和前景比例。 移动端应： 保留电影感叙事 降低视差强度 智能重构图 保持 MUMBAI 可读 必要时允许导航水平滚动 使用约 80 至 85vw 的目的地卡片 保持大触控目标 保持预订行动号召醒目 防止水平页面溢出 不要简单地将每个电影场景堆叠成普通移动端区块。 15. 图像方向 使用高分辨率、真实、电影感的孟买摄影。 优先选择真实视觉素材： 印度门 滨海大道 贾特拉帕蒂·希瓦吉·马哈拉吉终点站 卡拉戈达 科拉巴 多比加特 阿拉伯海 孟买天际线 黑白出租车 南孟买历史建筑 图像应像高端旅行纪录片中的画面。 优先选择黄金时刻、日落、蓝色时刻、氛围日光、真实街道照明、深透视、前景构图、自然人群和真实孟买建筑。 避免明显 AI 生成的建筑、不准确的地标、未来主义孟买图像、通用印度图像、过度饱和的照片和俗套旅游图形。 16. 最终体验 最终网站应像滚动穿越孟买的电影旅程。 序列应自然流动： MUMBAI 英雄场景 ↓ 印度门 ↓ 滨海大道 ↓ 贾特拉帕蒂·希瓦吉·马哈拉吉终点站 ↓ 孟买街头生活 ↓ 标志性目的地 ↓ 预订您的导览城市之旅 访客应在到达预订行动号召前，逐渐被更深地拉入孟买。 优先考虑氛围、叙事、摄影、景深、动态和情感沉浸，而非传统网站布局。 成品体验应足够高端，适合高端孟买旅游公司，同时足够令人兴奋，让人立即想探索这座城市并预订导览之旅。