Setting the file. One moment. 34.19
Gsap Min
(opens in a new tab)
references/layouts/stack.html
HTML·109 lines·3 KB
GSAP target for #video-wrap (top band):
17 landscape (1920×1080) — video top 52%:
18 tl.to('#video-wrap',
19 { left: 14, top: 14, width: 1892, height: 548,
20 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
21
22 portrait (1080×1920) — video top 44%:
23 tl.to('#video-wrap',
24 { left: 0, top: 0, width: 1080, height: 844,
25 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
26
27 4:5 (1080×1350) — y/h × 0.703:
28 tl.to('#video-wrap',
29 { left: 0, top: 0, width: 1080, height: 593,
30 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
31
32 Notes
33 - Sleek vertical: gives the speaker a wider stage on top.
34 - Card below is a full-width statement — great for one big sentence
35 or one big number.
36 - The `lower-third` zone resolves to bottom 30% by default
37 (`resolveZoneBounds`); for a 48% card adjust the GSAP tween to also
38 move card-host height, or use `zone="whiteboard-area"` + custom CSS.
39 - 14px gap between video and card looks clean — set composition bg to
40 a deep color (#0a0c12) so the gap reads as a separator.
41-->
42<!doctype html>
43<html lang="zh-CN">
44 <head>
45 <meta charset="utf-8" />
46 <title>layout · stack (video top, card bottom)</title>
47 <style>
48 html,
49 body {
50 margin: 0;
51 padding: 0;
52 background: #0a0c12;
53 color: #fff;
54 font-family: ui-sans-serif, system-ui, sans-serif;
55 }
56 .stage {
57 position: relative;
58 width: 1920px;
59 height: 1080px;
60 transform-origin: top left;
61 transform: scale(0.5);
62 background: #0a0c12;
63 overflow: hidden;
64 }
65 .region {
66 position: absolute;
67 box-sizing: border-box;
68 display: flex;
69 align-items: center;
70 justify-content: center;
71 font:
72 600 24px/1.3 ui-monospace,
73 monospace;
74 letter-spacing: 0.12em;
75 }
76 .video-region {
77 left: 14px;
78 top: 14px;
79 width: 1892px;
80 height: 548px;
81 background: #1a1f2e;
82 background-image: repeating-linear-gradient(
83 45deg,
84 transparent 0 12px,
85 rgba(255, 255, 255, 0.05) 12px 13px
86 );
87 }
88 .card-region {
89 left: 14px;
90 top: 576px;
91 width: 1892px;
92 height: 504px;
93 background: #f1ead8;
94 color: #1a1d2b;
95 }
96 .label {
97 padding: 12px 18px;
98 border: 1.5px solid currentColor;
99 border-radius: 4px;
100 }
101 </style>
102 </head>
103 <body>
104 <div class="stage">
105 <div class="region video-region"><span class="label">VIDEO · 1920×562 (top 52%)</span></div>
106 <div class="region card-region"><span class="label">CARD · 1920×518 (bottom 48%)</span></div>
107 </div>
108 </body>
109</html>