视频部分的自定义标题插图来自 Alyssa Nassner。
我们花了一些时间整理 Photoshop 文件,命名图层等,以便保持组织并理解各个部分。我们保存了文件的副本,避免修改原始文件。
最终,这个标题包含四个部分:背景、标题以及左右两侧的“卷轴”。它与画廊类似,画廊在两侧也有几组人。
我们尝试通过重复使用卷轴来使代码更精简。它是完全相同的图像,只是镜像,因此我们使用 transformX(-1)
来翻转它。这样可以减少一个图像请求。
我们遇到了一个非常奇怪的问题,左侧卷轴拒绝从页面的左侧边缘移出。我们可能花费了过多的时间担心它为什么不起作用,最终并没有在视频中解决这个问题。
我们编写了媒体查询,在小屏幕上移除卷轴。
关于 Chrome Web Inspector 的一个小技巧:当你处理数字并按下箭头键进行计数时,可以按住 Shift 键,这样就能以 10 步为单位跳跃,就像 Photoshop 中一样。
关于图像被截断,我不确定解决方法,但我认为问题是图像被翻转了,所以左侧边缘现在是右侧边缘,因此当你添加负边距时,它会出现在右侧而不是左侧,如果你理解我的意思的话?