jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(首页头图): LOGO 回白字、倒计时去框；满幅羊水明暗流动，按宝宝轮廓遮罩挖空；孕囊轻浮 (v26100421)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-04 06:36:23 +00:00
parent 0f73b85f10
commit dca1b69eff
13 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
js/hero-fx.js
View File

@@ -11,17 +11,17 @@
不在首页 / 页面隐藏 / 头图滚出视口时停画；系统「减少动态效果」下整块不画（CSS 也隐藏）。 */
(function () {
'use strict';
// [起始孕周, 静图, GIF（null = 只用静图）, 孕囊倍数 k] 2026-10-04：宝宝在囊里缩到原图的 70%，孕囊不变
// [起始孕周, 静图, GIF（null = 只用静图）, 孕囊倍数 k, 宝宝轮廓遮罩（水波/光挖掉宝宝用）] 2026-10-04：宝宝在囊里缩到原图的 70%，孕囊不变
const STAGES = [
[0, 'd953571ad48d.jpg', null, .42], // 1 4–7 周 胚芽 + 卵黄囊
[8, 'dd756c516072.jpg', null, .52], // 2 8–10 周 小豆芽胚胎
[11, 'a6f52893ad1e.jpg', null, .62], // 3 11–13 周 刚有人形
[14, '251ec778dc15.jpg', null, .72], // 4 14–17 周 身子拉长、吮手
[18, 'dcf2ae48e0ec.jpg', null, .86], // 5 18–23 周 比例接近新生儿、偏瘦
[24, 'b0e24b10aaee.jpg', null, 1], // 6 24–27 周 原来那个宝宝
[28, '85da5aaebb4f.jpg', null, 1.01], // 7 28–31 周 大一圈、有胎发
[32, '0780b4698253.jpg', null, 1.02], // 8 32–35 周 肉嘟嘟、抱腿
[36, 'ff112c222b1e.jpg', null, 1.03] // 9 36 周起 足月、撑满羊水囊（头朝上：10-04 用户说头朝下看着不舒服）
[0, 'd953571ad48d.jpg', null, .42, '91f1472ee58a.png'], // 1 4–7 周 胚芽 + 卵黄囊
[8, 'dd756c516072.jpg', null, .52, '5b39ca21a42e.png'], // 2 8–10 周 小豆芽胚胎
[11, 'a6f52893ad1e.jpg', null, .62, '0dcddb83b038.png'], // 3 11–13 周 刚有人形
[14, '251ec778dc15.jpg', null, .72, 'd63b80896e8e.png'], // 4 14–17 周 身子拉长、吮手
[18, 'dcf2ae48e0ec.jpg', null, .86, '0022b97f8cc0.png'], // 5 18–23 周 比例接近新生儿、偏瘦
[24, 'b0e24b10aaee.jpg', null, 1, 'd75b2a87e805.png'], // 6 24–27 周 原来那个宝宝
[28, '85da5aaebb4f.jpg', null, 1.01, '507e24e95ef0.png'], // 7 28–31 周 大一圈、有胎发
[32, '0780b4698253.jpg', null, 1.02, '681b0bdb885e.png'], // 8 32–35 周 肉嘟嘟、抱腿
[36, 'ff112c222b1e.jpg', null, 1.03, '494179795c67.png'] // 9 36 周起 足月、撑满羊水囊（头朝上：10-04 用户说头朝下看着不舒服）
];
const DEFAULT = 5;
const IMG = 'assets/img/';
@@ -38,11 +38,12 @@
while (i + 1 < STAGES.length && week >= STAGES[i + 1][0]) i++;
return i;
}
let cur = -1, seq = 0;
let cur = -1, seq = 0, babyMask = null; // babyMask：当前阶段宝宝轮廓（黑 + alpha），见 frame() 末尾
function show(i) {
if (i === cur) return;
cur = i;
const [, png, gif, k] = STAGES[i], my = ++seq;
const [, png, gif, k, mk] = STAGES[i], my = ++seq;
const mi = new Image(); mi.onload = () => { if (my === seq) babyMask = mi; }; mi.src = IMG + mk;
box.style.setProperty('--k', k);
// 先把旧图淡掉再换，避免新旧宝宝叠在一起闪一下
kid.classList.remove('is-on'); still.classList.remove('is-on');
@@ -73,7 +74,7 @@
const ctx = cv.getContext('2d');
const RS = 6; // 光束小画布缩小倍数
const rc = document.createElement('canvas'), rx = rc.getContext('2d');
const CW = 32; // 水波低分辨率宽（越低越柔）
const CW = 44; // 水波低分辨率宽（越低越柔）
const off = document.createElement('canvas'), oc = off.getContext('2d');
let tick = 0, W = 0, H = 0, dpr = 1, ch = 0, img = null, seen = true, raf = 0, last = 0, prev = 0;
let SX = 0, SY = 0, SR = 1; // 孕囊圆心/半径（CSS px）
@@ -94,26 +95,27 @@
}
// 水波：四层不同方向、不同速度的长波叠加，取正半部分 → 一片片柔和的亮斑缓缓流过
function water(t) {
const d = img.data, T = t * .45;
/* 2026-10-04 四版（用户：「整个上半部分要有羊水那种动态的感觉，现在还是偏静态」）：
明暗两相 —— 波峰处暖白亮斑、波谷处淡淡的暗影，source-over 叠，看起来是光透过流动的水在晃；
尺度比上一版小一倍多（一屏能看到好几片），流速加快。仍是极低分辨率放大 → 边缘全是软的，不是网。 */
const d = img.data, T = t * .9;
for (let y = 0; y < ch; y++) {
for (let x = 0; x < CW; x++) {
const u = x / CW * 6, v = y / CW * 6;
let w = Math.sin(u * 1.1 + T) + Math.sin(v * 1.3 - T * .8 + u * .4) + Math.sin((u - v) * .9 + T * .6) + Math.sin(Math.hypot(u - 4.5, v - 1) * 1.6 - T * 1.1);
w = w / 4; w = w > 0 ? w * w : 0; // 只留亮的那半，平方让过渡更软
const X = x / CW * W, Y = y / ch * H;
const g = guard(X, Y); // 宝宝那一圈完全不叠水波
const o = (y * CW + x) * 4;
d[o] = 255; d[o + 1] = 238; d[o + 2] = 214; d[o + 3] = w * 200 * g * (1 - y / ch * .35);
const u = x / CW * 11, v = y / CW * 11;
let w = Math.sin(u * 1.1 + T) + Math.sin(v * 1.3 - T * .8 + u * .5) + Math.sin((u - v) * .9 + T * .7)
+ Math.sin(Math.hypot(u - 8, v - 2) * 1.4 - T * 1.2) * 1.2;
w /= 4.2;
const o = (y * CW + x) * 4, fade = 1 - y / ch * .3;
if (w > 0) { const k = Math.min(1, w * 1.6); d[o] = 255; d[o + 1] = 240; d[o + 2] = 218; d[o + 3] = k * k * 150 * fade; }
else { const k = Math.min(1, -w * 1.6); d[o] = 150; d[o + 1] = 60; d[o + 2] = 40; d[o + 3] = k * k * 55 * fade; }
}
}
oc.putImageData(img, 0, 0);
}
function drawWater() {
ctx.globalCompositeOperation = 'lighter';
ctx.globalCompositeOperation = 'source-over';
ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
ctx.globalAlpha = .55;
ctx.drawImage(off, 0, 0, W, H);
ctx.globalAlpha = 1;
}
// 柔光束：光源在头图上方偏右画外；每道是一条很宽的渐变扇形，画在小画布上再放大
const RAYS = [[-.12, .07, .8], [0, .05, .7], [.11, .08, 1], [.23, .06, .7]];
@@ -157,8 +159,8 @@
if (p.y < -.03) { p.y = 1.03; p.x = Math.random(); }
if (p.x < -.03) p.x = 1.03; else if (p.x > 1.03) p.x = -.03;
const X = p.x * W, Y = p.y * H, gd = guard(X, Y);
if (gd <= 0) continue;
const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * gd;
if (gd <= 0 && !babyMask) continue;
const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * (babyMask ? 1 : gd);
const R = p.r * 2.4, g = ctx.createRadialGradient(X, Y, 0, X, Y, R);
g.addColorStop(0, 'rgba(255,250,238,' + al.toFixed(3) + ')');
g.addColorStop(1, 'rgba(255,250,238,0)');
@@ -180,6 +182,14 @@
drawWater();
rays(t);
dots(t, dt);
/* 宝宝保护：按当前阶段的宝宝轮廓把这一帧的水波/光束/微粒整块挖掉 ——
水在宝宝四周流，宝宝本身一像素都不叠（用户：「水波纹不能影响宝宝的表情，脸不能变」）。
孕囊在轻轻上下浮（CSS hbFloat），所以每帧现读位置。 */
if (babyMask) {
const hr = hero.getBoundingClientRect(), b = box.getBoundingClientRect();
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(babyMask, b.left - hr.left, b.top - hr.top, b.width, b.height);
}
}
function kick() { if (!raf) raf = requestAnimationFrame(frame); }
size();