前言
近来，萌生了一个想法：做一个赛车科普网站。既源于对赛车的热爱——这项运动在国内太小众了；也源于前端工程师的执念：比起枯燥的业务逻辑，视觉特效才是前端代码的魅力所在。
为此，我深入研究了国内外的赛道官网。国内的官网大多设计陈旧、信息滞后，甚至有些赛道连官网都没有。而国外的官网则是百花齐放，动态视效与杂志级排版令人惊艳。
前几日，我忽然想到，宣传赛道文化并非只有开发新东西这一条路，写文章分享这些网站设计也是一种宣传方式，而且还与我的本职工作相关。想到这一点，我顿时兴奋不已，于是便有了这篇文章。
今天，就从英国赛车圣地【古德伍德庄园】的官网说起。
古德伍德庄园：速度与优雅的百年交响
古德伍德是英国西萨塞克斯郡的一个特色小镇。这里有全世界最负盛名、规模最大的赛车节 —— 速度节，还有复古艺术节、咖啡艺术节，以及全球闻名且风景秀丽的赛马场。历史上，著名的古德伍德大作战也在此发生。
古德伍德速度节是全世界最富盛名、规模最大的赛车节。这是一项纪念汽车运动历史的超级盛会，在这场盛会上，人们可以看到来自不同领域、身处不同时代的传奇战车。从19世纪的蒸气机车，到当前最先进的“F1战舰”；从四轮驱动的拉力赛车到身披诡异外衣的勒芒战车。从喷发出古董油烟的老爷车到最激动人心的公路超跑，一切与轮子有关、追求速度的利器都能够在这里见到。
2025 年的速度节刚刚落幕，有兴趣的小伙伴可以去各大平台搜索直播回顾。文末放了一个精彩集锦视频。
今天要介绍的是他的【About】页面：About | Goodwood Estate。相比首页，我觉得这个关于页面给我的冲击更大。
从内容结构上来说，页面分了结构：
- 首屏展示区
- 欢迎语
- 历史的介绍
- 当下的介绍
- 未来愿景的介绍
- 页面尾部
我们一个个的来看看。
首屏展示区
一打开页面很明显是有一个渐进式的加载效果，各个元素相互配合，让人有种首屏是动态的感觉，毫无生硬之感。正如古人云：“随风潜入夜，润物细无声。” 这种动画效果就如同春雨一般，悄然地吸引着用户的注意力：
- 背景从模糊到清晰
- 标题从左往右逐渐显现
- scroll to expore 的标识在最后从下往上显现
动画的层次就会让人不自觉地先注意到背景是一所大的庄园，然后注意到标题：The home of exceptional experiences（臻享之域 – 非凡体验的归所）。
我去年开始了解古德伍德，看了部分他们的直播现场，场面确实宏大。国内有很多汽车发烧友前往打卡，也有国内的汽车厂商去做宣传。正如标题所说，从速度节的举办以及网站的质量来看，非凡的体验感无论是在线下还是线上都保持得十分一致。
欢迎语和历史介绍
第一段的介绍语简短有力：
I’m delighted to welcome you to Goodwood.com. As with everything we do at Goodwood, this website has been designed to reflect our passion for excellence; for our guests, customers and for our partners. We aim to enhance the experiences of visitors to the estate and our events, while also reaching like-minded people around the world.
诚挚欢迎您访问古德伍德官网。正如庄园秉持的百年匠心，本网站亦承载着我们对卓越的执着——为每位访客、客户与合作伙伴，缔造超越期待的臻享体验。我们既致力于丰富亲临庄园者的旅程，更愿汇聚全球心向美好的同道之人。
从欢迎语到历史章节的过度，页面由白底无缝转变为深色底，这着实让我眼前一亮。这种将浅色与深色主题巧妙融合在一个页面的设计，我此前从未见过。深色底确实会让人感觉更加庄重，而且从历史章节的内容和配图来看，深色底无疑是最佳搭配。
内容介绍部分普遍采用图 + 文字的形式，且各部分之间有大量空白，布局宛如杂志页面，给人一种精致、高雅的感觉。
部分内容介绍：
英王查理二世之子、第一代里士满公爵择定古德伍德作为乡间行宫，并于1697年购入这座詹姆士一世时期的原始宅邸。
古德伍德与赛马运动密不可分：1802年，这里举办了首场公开赛马会。
古德伍德赛道始建于二战不列颠战役时期，1948至1966年间作为英国赛车运动的核心舞台，曾见证无数传奇车手的巅峰时刻。
历史章节的最后一部分，是一位英国车手说过的话：
Give me Goodwood on a summer’s day and you can forget the rest of the world.
夏日古德伍德，便是人间至乐。By Roy Salvadori
Roy Francesco Salvadori（1922年5月12日- 2012年6月3日）是一名英国赛车手和赛车运动主管，从1952年到1962年参加一级方程式赛车。在耐力赛中，Salvadori 在1959年驾驶阿斯顿·马丁赢得了勒芒24小时耐力赛。
这里也做了动态效果的呈现，整体感觉流畅、舒适：
- 车手的图片从左往右擦除显现
- 文字部分用黑色底与照片部分重叠，带来视觉层次感
- 主体文字内容逐步显现
- 车手名字和介绍在显现动画效果上还加了一些位移
当下章节
到了当下的介绍部分，又从庄重的黑色过度到了明亮活泼的白色。这种过度再次给人强烈的视觉冲击，清晰地告诉读者们进入了下一章节。
与历史章节整洁静态的介绍不同，【当下】章节采用视频进行介绍。杂志页面般的布局，加上动态的视觉内容，让人仿佛身临其境，就像进入了哈利・波特世界里的魔法报纸。
部分内容介绍：
如今，古德伍德以旗舰盛事闻名于世，被誉为非凡奢华体验的至臻殿堂。
古德伍德速度节自1993年创办以来，这场为期四天的盛会已成为全球赛车运动与汽车文化的巅峰庆典，每年吸引逾二十万狂热爱好者共襄盛举。
赛马场与赛车赛道四季繁忙，而坐落于赛道腹地的古德伍德航空场，更是一座承载历史的传奇机场。
古德伍德亦以珍馐美馔闻名。从牧场牛羊放牧、庄园内肉品精制，直至厨房匠心烹制，我们对每一环节都精益求精。
当下章节的末尾，引用的是媒体的一句话：
Farmer, Butcher Chef delivers on its promise. Beautiful meat, butchered and cooked with the reverence it so rightly deserves.
农夫，屠夫，厨师恪守承诺，以虔诚之心将上等肉品精心分割、用心烹制，不负每一份食材的珍贵本味。By The Mail on Sunday
未来章节
从当下过度到未来，页面又从活泼的白色变成了充满想象力的黑色。
你看，颜色与不同的主题内容相结合，会给人带来截然不同的感受：黑色与历史搭配，让人感受到庄重；黑色与未来搭配，又让人联想到科幻。
部分内容摘抄：
我们矢志打造世代传承的可持续庄园，以激情为引、创意为炬，为青年才俊铺就通往科技前沿的革新之路。
速度节未来实验室：以充满活力的互动科技，启迪行业精英与未来科学家、发明家和探险家的无限灵感。
古德伍德教育信托是庄园内独立运营的环保教育慈善机构，致力于为弱势青少年搭建与自然对话的桥梁。
还有一个细节值得一提，每个区块的介绍内容都不是随意选取的，都有具体的对应内容。当鼠标移动上去时，会有一个动画效果提示你可以查看更详细的内容。
页面尾部
尾部的页脚采用了渐显 + 位移的配合动画，让页面元素不再生硬，用户体验感极佳。通常到了页脚，页面基本就结束了，但古德伍德的页面却有一个惊喜的 “彩蛋” 设计。
拉到页面最底部，会出现一张手绘插画，鸟瞰了整个庄园的全景，再次让人眼前一亮。我凭借自己的前端能力，找到了原图链接，文件名是： Estate Map (庄园地图)。
我仔细查看后发现，这幅插画并非随意绘制。里面包含了古德伍德的各种元素：赛车、马场、飞机场、农场、牧场、庄园等等，细节满满。画风复古，充满田园浪漫主义，与古德伍德的品牌定位十分契合。
技术解析
这里面运用到的前端技术其实不算复杂：
- 图片预加载
- 视频的压缩与运用（不少地方看上去是动图，其实是视频）
- 在视频加载前，会有一个静态的图片打底，不至于视频加载慢的时候，有内容的缺失
- 然后运用得很多的就是根据视窗的滚动添加 CSS 动画
- 背景的变化，我一开始是以为用 js 监听滚动，然后动态计算修改背景值，稍微研究一下发现是用的 css 动画，实现原理如下：
写在最后
整个古德伍德网站内容丰富多样，不仅有关于庄园自身的描述，还有速度节、艺术节等各种盛事的介绍。此外，网站还提供日程安排、酒店预订、各种活动预约，甚至还有周边产品的在线购买等服务，业务范围广泛。感兴趣的同学可以去逛逛。
看完这个网站后，我感慨万千。我认为，一个好的网站就应该如此：内容精致，动画效果恰到好处地服务于内容，从点滴细节中透露出品牌或主理人的审美与格调。
发表回复