/* ============================================================ motion.css — 动效层 ------------------------------------------------------------ 调性：慢、轻、只用 transform / opacity。 大牌网站的动效从不弹跳（没有 bounce / overshoot / spring）， 位移幅度也小 —— 20px 上浮就够，40px 以上就开始像 PPT 转场。 ⚠ 所有**隐藏**规则挂在 .jg-reveal-on 下面，装饰动效挂 .jg-motion-on。 那个类由 motion.js 在确认「支持 IntersectionObserver 且系统未要求减弱动态」 后才加到 上。所以：JS 挂了 / 老浏览器 / 用户开了减弱动态 → 元素全部保持默认可见，绝不会出现白屏。 ============================================================ */ /* ============================================================ 1. 滚动浮现 ------------------------------------------------------------ ⚠ 隐藏只在 .jg-motion-on 存在时生效。motion.js 的兜底会在 2.5s 后 直接把这个类从 上摘掉 —— 那一刻所有隐藏规则整条失效， 元素无条件恢复可见，不经过动画。这是"内容永不消失"的最后一道保险。 ⚠ 两个开关刻意分开： .jg-motion-on 装饰动效（hero 缓推、hover）—— 不藏内容，开了就不撤 .jg-reveal-on 浮现隐藏 —— 会藏内容，兜底时单独摘掉 合并的话，兜底一摘就把 hero 动画也关了。 ============================================================ */ .jg-reveal-on [data-jg-reveal] { opacity: 0; transform: translateY(20px); /* 800ms + 缓出：慢到能被感知，但不至于让人等 */ transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .jg-reveal-on [data-jg-reveal].jg-revealed { opacity: 1; transform: none; will-change: auto; /* 动完就撤，别一直占着合成层 */ } /* ============================================================ 2. Hero —— 缓慢推近（Ken Burns） ------------------------------------------------------------ 18 秒走完 1 → 1.10。 早先设的 24s / 1.06 太保守，实际根本看不出来——等于白做。 1.10 是"能感知但不抢戏"的甜点：盯着看能看出在推近， 扫一眼只觉得画面是活的。再快再大就变成廉价幻灯片。 ============================================================ */ .jg-hero { /* 背景图放在伪元素上才能单独做变换，动 background-position 会触发重绘 */ background-image: none; } .jg-hero::before { content: ''; position: absolute; inset: 0; background-image: var(--jg-hero-image); background-size: cover; background-position: center 42%; transform-origin: center 45%; } .jg-motion-on .jg-hero::before { /* 视差位移写在 translate3d 里，缩放交给动画 —— 两者合成不冲突 */ translate: 0 var(--jg-parallax, 0px); animation: jg-kenburns 18s ease-in-out infinite alternate; } @keyframes jg-kenburns { from { transform: scale(1); } to { transform: scale(1.10); } } /* 没有配图时不要跑动画（伪元素是空的，动了也只是空转） */ .jg-hero--plain::before { display: none; } /* ============================================================ Hero 文字入场 —— 只动 transform，opacity 全程保持 1 ------------------------------------------------------------ ⚠ 这是本文件最关键的一条取舍，别改回淡入： LCP 记的是元素**有没有被绘制**。`opacity:0` 的元素不算绘制， 所以淡入会把 LCP 往后推；但 `transform` 位移**是算绘制的** —— 元素一直可见，只是位置偏了。 所以「有入场动效」和「不伤 LCP」根本不是二选一： **首屏只动 transform，不动 opacity**，两个都要得到。 ============================================================ */ .jg-motion-on .jg-hero__eyebrow, .jg-motion-on .jg-hero__title, .jg-motion-on .jg-hero__text { animation: jg-hero-rise 1.25s cubic-bezier(.16, .84, .34, 1) backwards; } .jg-motion-on .jg-hero__eyebrow { animation-delay: .05s; } .jg-motion-on .jg-hero__title { animation-delay: .18s; } .jg-motion-on .jg-hero__text { animation-delay: .32s; } @keyframes jg-hero-rise { from { transform: translateY(26px); } to { transform: none; } } /* 标题额外来一下字距展开 —— 时装品牌最标志性的入场动作。 letter-spacing 会触发重排，但只作用在一个 h1 上、只跑一次，代价可以接受； 换来的辨识度比纯位移高得多。 */ .jg-motion-on .jg-hero__title { animation: jg-hero-rise 1.25s cubic-bezier(.16, .84, .34, 1) .18s backwards, jg-hero-track 1.8s cubic-bezier(.16, .84, .34, 1) .18s backwards; } @keyframes jg-hero-track { from { letter-spacing: .01em; } to { letter-spacing: .12em; } } /* ============================================================ 滚动提示 —— 首屏底部那根会呼吸的细线 给读者一个"下面还有"的信号，也让首屏不至于完全静止 ============================================================ */ .jg-hero__cue { position: absolute; left: 50%; bottom: 1.6rem; z-index: 1; width: 1px; height: 2.6rem; transform: translateX(-50%); overflow: hidden; background: rgb(var(--jg-paper) / .28); } .jg-hero__cue::after { content: ''; position: absolute; inset: 0; background: rgb(var(--jg-paper)); transform: translateY(-100%); } .jg-motion-on .jg-hero__cue::after { animation: jg-cue 2.4s cubic-bezier(.6, 0, .4, 1) infinite; } @keyframes jg-cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ============================================================ Hero 视差 —— 背景比页面滚得慢 位移量由 motion.js 写进 --jg-parallax，这里只负责用 ============================================================ */ .jg-motion-on .jg-hero::before { will-change: transform; } /* ============================================================ 3. 页头 —— 滚动后浮出细分隔线 顶部有 hero 大图时，一开始那条线是多余的 ============================================================ */ body[data-header] .ct-header { transition: border-color .35s ease, box-shadow .35s ease; } .jg-motion-on:not(.jg-scrolled) body[data-header] .ct-header { border-bottom-color: transparent; } /* ============================================================ 4. 卡片 hover —— 图缓推 + 标题下划线滑入 ============================================================ */ .jg-card__title a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size .45s cubic-bezier(.22, .61, .36, 1); padding-bottom: .1em; } .jg-card:hover .jg-card__title a { background-size: 100% 1px; opacity: 1; } /* "Read the guide" 的线从左往右缩放，比整条闪一下细腻 */ .jg-card__more { border-bottom-color: transparent; position: relative; } .jg-card__more::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform .45s cubic-bezier(.22, .61, .36, 1); } .jg-card--lead:hover .jg-card__more::after { transform: scaleX(0); transform-origin: right; } /* ============================================================ 5. 兜底：系统要求减弱动态时，全部关掉 ------------------------------------------------------------ motion.js 已经会直接 return 不加 .jg-motion-on，这里是第二道保险 —— 万一将来有人把类写死在 HTML 里，这条仍然拦得住。 ============================================================ */ @media (prefers-reduced-motion: reduce) { .jg-reveal-on [data-jg-reveal], .jg-motion-on .jg-hero__eyebrow, .jg-motion-on .jg-hero__title, .jg-motion-on .jg-hero__text { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .jg-motion-on .jg-hero::before { animation: none !important; translate: none !important; } .jg-motion-on .jg-hero__cue::after { animation: none !important; } .jg-card__media img, .jg-card__title a, .jg-card__more::after { transition: none !important; } }