某一天，客户给我们发来一个效果图，需要做一个“网站正在建设中”的页面。并给我们交付了半天工作量的工时费。意味着，我们想要保证那么一点利润，必须在半天之内做完。

效果图如下

提供了一个PC页面的效果图。

要求：

按照我们以往的经验，这个网站半天可以做完。但是所谓的酷炫的效果，也只能是我们常用的，用的比较熟练的动画效果。
但是，我们工作理念中有一条是，只要时间和条件允许，我们要不断创新，绝不复用。

最终有了如下几个我们想到的效果：

第一屏打字机效果

第二屏效果一：客机飞过上空

第二屏效果二：夜空及slogan随鼠标移动。手机上支持陀螺仪。


 
这三个效果，是我们想到的适合当前效果图的动画效果。
在这里我们重点讲飞机飞过的效果。

起初，刚看到效果图的时候，黑色的天空加上slogan，感觉少一点什么东西。所以需要修改一些设计。这里要说明一下，按照我们以往的经验，修改客户的设计稿，前提修改后的设计一定要比原始设计要更好。而这个好，一定要是客户能接受的。

好了，下面要修改设计。我们首先想到的是，要把黑色天空换成更加戏剧化的天空。看了很多种天空的素材，最终选择了下面的素材。

但是这个图片用于实际的效果图时，天空过于闪亮，无法凸显出slogan。在几轮细致的“曲线”，“色阶”调整后，终于可以了。
…

虽然增加了一点色彩，但是缺乏一些“互动”。如果天空是移动的就更好了，但这种动，可能是更多预设好的，缺少访客的可控性。故决定使用parallax。于是有了鼠标响应与手机端的重力感应效果。

看到效果，感觉还可以，但是内心暗示自己还可以做点什么。

突然想到，这个是“正在建站中”的页面，更多精彩在路上。所以，想到可以在空中加一个飞行中的飞机，意味着，航班还未到达。

首先要找一个飞机的素材，因为效果图是底部视角，所以搜索飞机素材时的关键词为：plane bottom view。

最终锁定了下面的素材：

需要抠图，更重要的是，这个飞机是白天拍到的。那么夜空中的飞机又会是什么样的，凭感觉调整了“曲线”，“色阶”，“色温”。再把飞机抠出来。

但另外一个问题出现了。在印象中，夜晚的飞机有各种灯光。那么需要在飞机上加入灯光。那么更多的问题来了。光源在什么位置？都是什么样的光源？作用又是什么？

oh my god！

查询资料：

飞机灯光有：航行灯(positionlights)，防撞灯(anti-collisionlight)，着陆灯(fixed landing light)，转弯灯（runway turnoff)，滑行灯（taxi light），机翼照明灯（wing illumination），标志灯（logo light）…
在夜空中从底部看，能看到的灯光有航行灯(positionlights)，防撞灯(anti-collisionlight)。

航行灯：

位于翼尖，左红右绿，持续亮，便于飞行员在夜间目视判断飞机的航向 。

在飞行员左侧机翼尖上的是红灯，右侧机翼尖上的是绿灯，机尾上装有一盏白灯。飞机在夜间航行时，必须打开航行灯。如果飞行员能同时看见三盏灯，这说明在自己的上空或下方有飞机在飞行，这时是没有危险的。如果只能看到红色和绿色的航行灯，说明有一架飞机正在迎面飞来，有对撞的危险，要设法避开。如果只能看见一盏红灯或绿灯，那说明在左侧或右侧有飞机在飞行，只要不偏离航线是不会相撞的。（涨姿势了）
最终飞机基本样式有了。

防撞灯：

也叫频闪灯。一共有5个，其中两个红色灯，分别位于机身背部和腹部。白色灯三个，分别位于两个大翼翼尖和尾椎处。考虑到有限的时间与制作难度及设计的减法原则，我们决定在机身腹部做一个白色的频闪灯。

不同的飞机闪烁方式是不一样的，波音的是稳定的闪烁，空客的是连续闪三下，然后停顿，再闪三下。频率30Hz~120Hz。闪光时间为2ms。
….
发现，几乎看不到闪光。问题出现在哪里？
我使用的显示器响应时间为2ms。而如果把闪光时间设置为2ms，那么就意味着显示器液晶还没有来得及发光，就接收到了变暗的指令。加上一定的误差，闪光效果并没有预想的那样好。
最终决定使用动画的闪光时间为10ms。
好吧。
就这样，加一个飞机飞过的效果，会涉及到这么多的知识点。

最终效果：

由于客户的要求，没有在文案上做修改。个人感觉英文有些问题。

Demo地址：

https://www.1pxeye.com/works/xsight/
总耗时1个工作日。由于是响应式的，具体效果取决于你使用的客户端。每个客户端显示布局都是不一样的。