feat(首页头图): 孕25周换母婴作图 v6 GIF——宝宝背对镜头、脐带更明显 (v26093016)

- 素材换母婴作图 v6（替代 v5 的 mp4）：卡通动漫风宝宝背对镜头不露脸，脐带从囊壁右上方垂下、全程不动；画幅从 1280×736 变 16:9。 - 背景 = v6 静帧缩 .88、截取块中心 (656,360) 摆到 (1240,375)，囊完整不裁； <video> 换成 <img>：原 GIF 截 450×450 整高块（含宝宝全部动作），object-fit:cover 铺满 .hero-baby，首帧和背景对齐误差 ≈3.7（GIF 抖动噪点级）。加载完淡入，没加载出来停在静帧。 - 宝宝不露脸了，嘴边的小气泡连同样式一起去掉；底色兜底 #df856a。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 16:02:41 +00:00
parent 488989d82c
commit 8c25d5fc74
7 changed files with 32 additions and 64 deletions
--- a/assets/img/1f7ed5405262.jpg
+++ b/assets/img/1f7ed5405262.jpg
--- a/assets/img/5c5c6379bd5f.gif
+++ b/assets/img/5c5c6379bd5f.gif
--- a/assets/img/7f9aace360fa.jpg
+++ b/assets/img/7f9aace360fa.jpg
--- a/assets/video/1a9ccfb1439f.mp4
+++ b/assets/video/1a9ccfb1439f.mp4
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26093015 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26093016 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -59,14 +59,11 @@
 <section class="screen is-active" id="screen-home" data-screen="home">
      <div class="home-hero">
        <div class="petals" id="petals"></div>
-        <!-- 2026-09-30：宝宝不再是右上角一张圆形 PNG。头图背景 = 孕 25 周循环视频（母婴作图 v5）的第 1 帧，
-             这里只叠一段截了羊水囊的同源视频 .hero-kid：镜头固定、同一帧起步，所以和背景严丝合缝；
-             宝宝自己吸手指、低头抬头，囊和囊壁上细细的脐带不动。视频放不起来就停在背景那一帧。 -->
+        <!-- 2026-09-30：头图背景 = 孕 25 周动图（母婴作图 v6）的静帧，这里只叠一张截了羊水囊的同源 GIF .hero-kid：
+             镜头固定、同一帧起步，所以和背景严丝合缝；宝宝背对镜头自己动，囊和脐带不动。
+             GIF 没加载出来就停在背景那一帧。v6 宝宝不露脸，原来嘴边的小气泡去掉了。 -->
        <div class="hero-baby" aria-hidden="true">
-          <video class="hero-kid" id="heroKid" src="assets/video/1a9ccfb1439f.mp4"
-                 muted autoplay loop playsinline webkit-playsinline x5-playsinline
-                 preload="auto" disablepictureinpicture></video>
-          <span class="hb-bub b1"></span><span class="hb-bub b2"></span><span class="hb-bub b3"></span>
+          <img class="hero-kid" id="heroKid" src="assets/img/5c5c6379bd5f.gif" alt="" decoding="async">
        </div>
        <!-- 右上角原来有个消息圆钮，点开只弹「暂无新消息」——一个永远没有内容的入口，
             还顶着一颗红点天天提示。整个删掉；这一排现在只剩左边的品牌字。
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26093015';
+  var VER = '26093016';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

@@ -3696,24 +3696,14 @@
    if (document.visibilityState !== 'hidden') resetScreenOnShow();
  });

-  /* 首页头图里会动的宝宝（2026-09-30）。视频是装饰：静音、循环、放不了就停在底下的静态图上。
-     ⚠️ 微信 iOS 的 web-view 不认 autoplay 属性，要等 WeixinJSBridgeReady 再手动 play()；
-        页面切走时暂停，切回来再放，省电也省流量。「减少动态效果」下 CSS 直接隐藏，这里也不放。 */
+  /* 首页头图里会动的宝宝（2026-09-30，v6 起是 GIF）。装饰用：加载完再淡入，没加载出来就停在底下的静态图上。
+     「减少动态效果」下 CSS 直接隐藏。 */
  (function heroKid() {
-    var v = document.getElementById('heroKid');
-    if (!v) return;
-    var reduce = false;
-    try { reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) {}
-    if (reduce) { try { v.removeAttribute('autoplay'); v.pause(); } catch (e) {} return; }
-    v.muted = true;
-    function play() { try { var p = v.play(); if (p && p.catch) p.catch(function () {}); } catch (e) {} }
-    v.addEventListener('playing', function () { v.classList.add('is-on'); });
-    document.addEventListener('WeixinJSBridgeReady', play, false);
-    if (window.WeixinJSBridge) play();
-    document.addEventListener('visibilitychange', function () {
-      if (document.visibilityState === 'hidden') { try { v.pause(); } catch (e) {} } else play();
-    });
-    play();
+    var g = document.getElementById('heroKid');
+    if (!g) return;
+    function on() { g.classList.add('is-on'); }
+    if (g.complete && g.naturalWidth) on();
+    else g.addEventListener('load', on);
  })();

  if (document.readyState === 'complete') init();
--- a/mama-box.css
+++ b/mama-box.css
@@ -191,20 +191,20 @@ a.skip:focus{left:16px;top:16px}
     hero 橙色区底缘：中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
   ⚠️ 上面这些是**设计稿**的数，不是现在的实现值。设计稿里没有 slogan，
      加进去之后品牌字以下整列都下移了，实际纵向排布以 .home-hero 里那笔账为准。 */
-/* 2026-09-30 头图 = 孕 25 周（母婴作图 v5，替代 v4：羊水囊改不规则有机形状、去掉囊顶胎盘，脐带从囊壁右上方
-   细细淡淡地垂向宝宝身前；卡通宝宝带细软胎发、暖桃底；无孕肚、镜头固定）。
-   背景 assets/img/1f7ed5405262.jpg（1560×750 = 3 倍图 520×250）= 视频 yun25w-loop.mp4 第 1 帧缩到 .90
-   （v5 的囊比 v4 的圆宽，.93 会切掉囊右缘 17px），羊水囊中心 (661,381) 摆在 (1240,375)；视频左/上/下不够的地方按边缘色拉伸补齐并羽化。
-   图高钉死 = 橙区高、右对齐，屏宽 ≤520 都铺得满；再宽就露底色 #de8868（=图左缘色）。
-   会动的宝宝是叠在上面的同源视频，见 .hero-baby。
+/* 2026-09-30 头图 = 孕 25 周（母婴作图 v6，替代 v5：卡通动漫风宝宝背对镜头、不露脸；脐带更明显，
+   从囊壁右上方垂下、全程不动；不规则羊水囊、暖桃底；镜头固定）。v6 画幅是 16:9（静帧 1280×720）。
+   背景 assets/img/7f9aace360fa.jpg（1560×750 = 3 倍图 520×250）= 静帧 yun25w-still.png 缩到 .88，
+   截取块中心 (656,360) 摆在 (1240,375)；左/上/下不够的地方按边缘色拉伸补齐并羽化。
+   图高钉死 = 橙区高、右对齐，屏宽 ≤520 都铺得满；再宽就露底色 #df856a（=图左缘色）。
+   会动的宝宝是叠在上面的同源 GIF，见 .hero-baby。
   上面叠一层很淡的暖色左深右透渐变，只为让左边白字（孕周环、天数卡）再稳一点。
   形状（高度、底部椭圆弧）不变。 */
 .home-hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(150,55,35,.20) 0%,rgba(150,55,35,.07) 38%,rgba(150,55,35,0) 58%),
-    url(assets/img/1f7ed5405262.jpg) right center/auto 100% no-repeat,
-    #de8868;
+    url(assets/img/7f9aace360fa.jpg) right center/auto 100% no-repeat,
+    #df856a;
  padding:env(safe-area-inset-top) 15px 0 16px;
  /* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的，
     现在气泡补全成整圆（高 189.5），橙区必须够高才不会被 overflow:hidden 切掉。
@@ -292,46 +292,27 @@ a.skip:focus{left:16px;top:16px}
      下移之后圆心 (屏宽−25−94.75, 134.75)、下缘 40+189.5=229.5，
      必须留在「宝宝来信」卡顶（234）之上 —— 这就是橙区高必须 ≥250 的来源。
      改 top 前先读 .home-hero 里那笔竖列账。 */
-/* 定位和浮动都挂在外壳上，img 只负责铺满 —— 这样嘴边的泡泡是
-   相对气泡本身定位的，会跟着整幅画一起上下浮，而不是自己飘在原地 */
-/* 会动的宝宝（2026-09-30）：视频 assets/video/1a9ccfb1439f.mp4 = 原片以囊心 (661,381) 截 660×660、缩到 400×400。
-   原片本身是正放 5s + 倒放 5s，首尾同一帧，直接 loop 无缝。
-   摆位：背景里视频帧缩了 .90，这块 660 → 594 画布像素，左上角落在 (943,78)，
-   换算成橙区高 H：宽高 594/750 = .792H，顶 78/750 = .104H，右 (1560−1537)/750 ≈ .0307H。
-   宝宝的动作（吸手指时低头抬头 ±15px）全在囊心半径 ≈230 以内，遮罩 80% 实心 = 264，够。
-   背景就是同一视频的第 1 帧、镜头固定，所以只需一圈宽羽化遮罩（80%→100%）把方块边化掉，
-   囊外光点冻结在第 1 帧也看不出来。放起来之前 opacity:0，JS 收到 playing 再淡入，
-   放不了就一直是背景那一帧（静态宝宝），不会出现黑框/播放按钮。
-   用户要求：囊不动，只让宝宝自己动 —— 所以这一层没有任何 transform 动画。 */
+/* 会动的宝宝（2026-09-30，v6）：GIF assets/img/5c5c6379bd5f.gif = 原 GIF（800×450，16fps，3 秒无缝循环）
+   截 x185 y0 起 450×450（整高，含宝宝全部动作），不缩放，1.7MB。
+   摆位：背景里静帧缩了 .88（静帧是 GIF 的 1.6 倍），这块 = 静帧 720 → 634 画布像素，左上角落在 (923,58)，
+   换算成橙区高 H：宽高 634/750 = .8453H，顶 58/750 = .0773H，右 (1560−1557)/750 ≈ .004H。
+   背景就是同一画面的静帧、镜头固定，所以只需一圈宽羽化遮罩（80%→100%）把方块边化掉，
+   囊里光点在羽化圈冻结成静帧也看不出来。加载完之前 opacity:0，JS 收到 load 再淡入，
+   没加载出来就一直是背景那一帧。用户要求：囊不动，只让宝宝自己动 —— 所以这一层没有任何 transform 动画。 */
 .hero-baby{position:absolute;z-index:2;
-  top:calc((250px + env(safe-area-inset-top)) * .104);
-  right:calc((250px + env(safe-area-inset-top)) * .0307);
-  width:calc((250px + env(safe-area-inset-top)) * .792);
-  height:calc((250px + env(safe-area-inset-top)) * .792);
+  top:calc((250px + env(safe-area-inset-top)) * .0773);
+  right:calc((250px + env(safe-area-inset-top)) * .004);
+  width:calc((250px + env(safe-area-inset-top)) * .8453);
+  height:calc((250px + env(safe-area-inset-top)) * .8453);
  pointer-events:none;user-select:none}
 .hero-kid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:transparent;opacity:0;transition:opacity .8s ease;
  -webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}
 .hero-kid.is-on{opacity:1}
-/* 嘴边的小气泡。起点定在视频里嘴（拳头）大致的位置（49.8%/51.2%，v5），往左上飘 ——
-   宝宝头朝右上侧躺，左上正好是「水面」方向。z-index 压在视频上面。 */
-.hb-bub{position:absolute;z-index:1;left:49.8%;top:51.2%;width:7px;height:7px;border-radius:50%;
-  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
-  opacity:0;animation:bub 4.2s ease-in-out infinite}
-@keyframes bub{
-  0%{transform:translate(0,0) scale(.45);opacity:0}
-  14%{opacity:.9}
-  70%{opacity:.55}
-  100%{transform:translate(-16px,-46px) scale(1.15);opacity:0}
-}
-/* 三颗错开大小、时长和出发点，才不像在同一个节拍上打点 */
-.hb-bub.b2{left:47.2%;top:52.6%;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
-.hb-bub.b3{left:51.7%;top:49.8%;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
 /* 系统开了「减少动态效果」就全部停下：这类装饰性循环动画是前庭不适的常见诱因 */
@media (prefers-reduced-motion:reduce){
  .hero-kid{display:none}
-  .hb-bub{animation:none;opacity:0}
 }

 /* 天数文案：一张毛玻璃小卡，不再是裸字浮在橙底上。