关于新博客的Banner实现

那么我的要求是这样：

Banner中间的文本会挡在图片中的某一固定部分，而且它会随文档流滚动，所以Banner背景必须拥有滚动视差。其中视口视差是较好的方案。鼠标视差比较吃性能，而且几乎不可避免js且不兼容移动端。
阅读文章的过程中没有背景（即便只有两侧的装饰，并且移动端也有模糊）会十分单调。若分设两个背景，在从Banner展示页（通常是主页）过渡到正文时，全局背景必然早已加载。因此Banner展示页必须同时拥有两个背景，一个banner随机大图，另一个是普通阅读时的装饰背景。
Banner背景与正文背景之间必须以优雅的水波过渡。单纯为美观考虑，这种“优雅的水波过渡”可以为以水波为分级分隔的多级渐变。
如果不能兼容移动端，采取一个移动端能接受的方式。

要求提完了，接下来该开始到处碰壁了。

实现基本逻辑#

H5结构#

这方面没什么好说的，外面一个方形窗口用来挡住里面的异形轨道，就像录像带的那个窗口，里面的异形轨道接入clip-path制造波浪以真裁切这个视窗再内部的bg-fixed图片。

外层窗口的限制#

通过overflow-x-hidden和width确定宽度避免撑开，准备承接多个track子元素。

实际代码中用的是固定宽度是避免不同设备上波浪的频率不同。

中部异形轨道的移动#

采用

1
@keyframes banner2-desktop-cycle {
2
    0% { left: 0; }
3
    100% { left: calc(-1 * var(--banner-width)); }
4
}

无限线性循环可以使得视窗向左滚动后极限拉回，然后再使用absolute w-[200%]确定为外层窗口的两倍宽用于无缝衔接。这样做数学上有个bug就是这样频率只能设定为宽度的整除倍，目前没什么好的解决方案。

使用left动画是因为translate动画会导致bg-fixed失效。这是W3C Recommendation现在明文文档建议级别的。

被transform影响的元素，其 background‑attachment: fixed 渲染时视为 scroll，计算值不变。

然而left终究是布局元素，动这么大的图片是会出事的。在性能一般的手机上多个大图这样移动时会导致闪屏，不得不用translate替代。

将各个轨道设置不同的动画时长、clip-path、透明度就能自定义水波的参数。absolute叠加即可实现多层水波纹效果。

内部图片的固定#

内部图片，桌面端的纹理自然可以用bg-fixed直接固定，但手机端因为用了translate不太好这么做。

在尝试了包括但不限于sticky(照样会被translate杀)、滚动进度动画(实在太新了)等方案，我决定以毒攻毒，用translate本身抵消translate。

移动端现在中部使用左循环移动视窗，内部的图片使用右移动抵消左移动，牺牲纵向滚动视差，同时用上了各种优化，好歹是能用了。

闪屏的解决方案(26.03.23)#

闪烁原因是一张张巨大的图片在屏幕上移动同时计算透明度会吃掉移动端本就一般的显卡巨量的性能造成失帧。

解决方案是优化clippath svg路径使其只处理水波纹部分，就像这样：

然后再添加一张不动，普通的，反而是下面波纹部分被切去的图片：

这项改动并不复杂，但其效果是巨大的（我怎么早没想到）

这个最低的分割高度应当满足：

\mathrm{SplitHeight}_i = \operatorname{max}_i^n\,(H_i + A_i)

即

1
// 最大的高度+振幅
2
const maxVbpa = Math.max(...heights.map((h, i) => {
3
  return h + amplitudes[i]
4
}));

波浪SVG#

1
// 动态的水波层
2

3
const wT; // 一宽的循环次数，越大频率越高。经验值桌面3~4移动7~8
4
const A; // 振幅，单位1=图片高度
5
const vb; // 高度修正。为正时从底部提高，单位1=图片高度
6
const maxVbps; //
7

8
const w = 1 / 4 / wT; // 循环节长度
9
const wc = 4 / 25 / wT; // 二次贝塞尔近似三角函数的控制点经验值
10
const repeatTimes = Math.ceil(0.4999 / w); // 避免误差ceil到上一级
11
const wavePath =
12
`M0,${1 - vb} ` + // 起始点，从左下角开始上升到最低高度，最低高度由此生效
13
`c${w/2},0,${wc},${-A},${w},${-A} s${wc},${A},${w},${A} ` +
14
(
15
  `${wc},${-A},${w},${-A} ` + // 上升段
16
  `${wc},${A},${w},${A} ` // 下降段
17
).repeat(repeatTimes - 1) + // 循环，注意忽略第一节（第一节是cs不是ss）
18
`v${-maxVbps} h-${repeatTimes * 2 * w} z`; // 垂直上升至波峰(v -A) → 水平左移回左侧(h -总宽度) → 闭合路径(z)，形成封闭裁剪区域
19

20
// 静态的那个图片
21

22
const staticBannerPath = `M0,0 v${1-maxVbps} h1 v${maxVbps-1} z`;

Code#

1
<div class="banner2-window">
2
  <div class="banner2-track track-a"></div>
3
  <div class="banner2-track track-b"></div>
4
  <!-- etc. -->
5
  <div class="banner2-track banner2-static-track"></div>
6
</div>

1
.track-a { animation-duration: 2s; clip-path: url(#clip-path-a); }
2
.track-b { animation-duration: 3s; clip-path: url(#clip-path-b); }
3
/* etc. */
4

5
.banner2-window {
6
    --banner-height: 100%;
7
    position: absolute;
8
    inset: 0;
9
    width: var(--banner-width);
10
    height: var(--banner-height);
11
    overflow-x: hidden;
12
}
13

14
.banner2-track {
15
    position: absolute;
16
    width: 200%;
17
    height: 100%;
18
    display: flex;
19
    animation-timing-function: linear;
20
    animation-iteration-count: infinite;
21
    z-index: 2;
22
}
23

24
.banner2-track.banner2-static-track {
25
  position: absolute;
26
  left: 0;
27
  width: 100vw;
28
  height: 100%;
29
  display: flex;
30
  box-sizing: border-box;
31
  background: no-repeat top / cover;
32
  background-image: var(--banner2-track-bg);
33
}
34

35
.banner2-track.banner2-static-track::after {
36
  display: none;
37
}
38

39
.banner2-track::after {
40
    position: sticky;
41
    left: 0;
42
    width: 50%;
43
    height: 100%;
44
    content: '';
45
    display: block;
46
    box-sizing: border-box;
47
    background-image: var(--banner2-track-bg);
48
    background-repeat: no-repeat;
49
}
50

51
/* 桌面端 */
52
@media (min-width: 1025px) {
53
    .banner2-window {
54
        --banner-width: 2560px;
55
        left: calc(50% - var(--banner-width) / 2);
56
    }
57

58
    .banner2-track {
59
        animation-name: banner2-desktop-cycle;
60
    }
61

62
    .banner2-track::after {
63
        background: no-repeat fixed center / cover;
64
    }
65
}
66

67
/* 手机端 */
68
@media (max-width: 1024px) {
69
    .banner2-window {
70
        --banner-width: 1024px;
71
    }
72

73
    .banner2-track {
74
        left: 0;
75
        animation-name: banner2-mobile-leftcycle;
76
        transform: translateZ(0);
77
        will-change: transform;
78
    }
79

80
    .banner2-track::after {
81
        width: 100vw;
82
        background: no-repeat top / cover;
83
        animation-name: banner2-mobile-rightcycle;
84
        animation-timing-function: linear;
85
        animation-iteration-count: infinite;
86
        animation-duration: inherit;
87
        transform: translateZ(0);
88
        will-change: transform;
89
    }
90
}
91

92
@keyframes banner2-desktop-cycle {
93
    0% { left: 0; }
94
    100% { left: calc(-1 * var(--banner-width)); }
95
}
96

97
@keyframes banner2-mobile-leftcycle {
98
    0% { transform: translateX(0); }
99
    100% { transform: translateX(calc(-1 * var(--banner-width))); }
100
}
101

102
@keyframes banner2-mobile-rightcycle {
103
    0% { transform: translateX(0); }
104
    100% { transform: translateX(calc(var(--banner-width))); }
105
}

絵夢の小站