121 lines
3.7 KiB
HTML
121 lines
3.7 KiB
HTML
|
<!--
|
|||
|
|
Layout: split — 50/50 side-by-side
|
|||
|
|
─────────────────────────────────────────────────────────────────────
|
|||
|
|
Real schema only has `card.zone` (5 enum values) — there is NO
|
|||
|
|
`card.layout` field, and video bounds are composition-level
|
|||
|
|
(`videoTrack.bounds`, one-time). The "split look" is implemented by:
|
|||
|
|
1. setting card.zone = "side-panel" for each card in this stretch
|
|||
|
|
2. tweening #video-wrap to the other half via GSAP between cards
|
|||
|
|
|
|||
|
|
Recommended storyboard.json card entry (strict v3):
|
|||
|
|
{
|
|||
|
|
"id": "card-XX",
|
|||
|
|
"intent": "speaker + data side-by-side",
|
|||
|
|
"startSec": 8, "endSec": 14,
|
|||
|
|
"accentIndex": 0,
|
|||
|
|
"zone": "side-panel",
|
|||
|
|
"contentHints": { "kicker": "...", "title": "...", "detail": "..." }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
GSAP target for #video-wrap during this card (paste in <script>):
|
|||
|
|
landscape (1920×1080):
|
|||
|
|
tl.to('#video-wrap',
|
|||
|
|
{ left: 960, top: 0, width: 960, height: 1080,
|
|||
|
|
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
|||
|
|
|
|||
|
|
portrait (1080×1920) — flips to top/bottom:
|
|||
|
|
tl.to('#video-wrap',
|
|||
|
|
{ left: 0, top: 960, width: 1080, height: 960,
|
|||
|
|
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
|||
|
|
|
|||
|
|
4:5 (1080×1350) — derive by ×0.703 on y/h:
|
|||
|
|
tl.to('#video-wrap',
|
|||
|
|
{ left: 0, top: 675, width: 1080, height: 675,
|
|||
|
|
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
|||
|
|
|
|||
|
|
Notes
|
|||
|
|
- Card-host (from card.zone="side-panel") covers half the canvas;
|
|||
|
|
opaque card background is fine — it only paints its own half.
|
|||
|
|
- Flip card/video sides: swap which side gets the speaker tween.
|
|||
|
|
- With 14–18px page-level gap, set composition bg to deep color
|
|||
|
|
(e.g. #0a0c12) so the gap reads as a clean separator.
|
|||
|
|
-->
|
|||
|
|
<!doctype html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>layout · split (50/50)</title>
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #0a0c12;
|
|||
|
|
color: #fff;
|
|||
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|||
|
|
}
|
|||
|
|
.stage {
|
|||
|
|
position: relative;
|
|||
|
|
width: 1920px;
|
|||
|
|
height: 1080px;
|
|||
|
|
transform-origin: top left;
|
|||
|
|
transform: scale(0.5);
|
|||
|
|
background: #0a0c12;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.region {
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font:
|
|||
|
|
600 24px/1.3 ui-monospace,
|
|||
|
|
monospace;
|
|||
|
|
letter-spacing: 0.12em;
|
|||
|
|
}
|
|||
|
|
.card-region {
|
|||
|
|
left: 18px;
|
|||
|
|
top: 18px;
|
|||
|
|
width: 942px;
|
|||
|
|
height: 1044px;
|
|||
|
|
background: #f1ead8;
|
|||
|
|
color: #1a1d2b;
|
|||
|
|
}
|
|||
|
|
.video-region {
|
|||
|
|
left: 978px;
|
|||
|
|
top: 18px;
|
|||
|
|
width: 924px;
|
|||
|
|
height: 1044px;
|
|||
|
|
background: #1a1f2e;
|
|||
|
|
background-image: repeating-linear-gradient(
|
|||
|
|
45deg,
|
|||
|
|
transparent 0 12px,
|
|||
|
|
rgba(255, 255, 255, 0.05) 12px 13px
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
padding: 12px 18px;
|
|||
|
|
border: 1.5px solid currentColor;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.meta {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 18px;
|
|||
|
|
top: -36px;
|
|||
|
|
font:
|
|||
|
|
12px/1 ui-monospace,
|
|||
|
|
monospace;
|
|||
|
|
letter-spacing: 0.18em;
|
|||
|
|
color: #888;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="stage">
|
|||
|
|
<div class="meta">SPLIT · 1920×1080 · card 960 | video 960</div>
|
|||
|
|
<div class="region card-region"><span class="label">CARD · 960×1080</span></div>
|
|||
|
|
<div class="region video-region"><span class="label">VIDEO · 960×1080</span></div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|