화면 분할

<div class="stage" id="stage"><div class="pane left"><div class="chart"><i></i><i></i><i></i><i></i><i></i></div><b>BEFORE</b></div>
  <div class="pane right"><div class="chart"><i></i><i></i><i></i><i></i><i></i></div><b>AFTER</b></div>
  <div class="divider" id="divider"><i></i></div><div class="labels"><span>A</span><span>B</span></div>
</div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);touch-action:none}
.pane{position:absolute;inset:0 50% 0 0;overflow:hidden}
.left{right:50%;background:linear-gradient(150deg,#d6d5cb,#b8c2bd);animation:leftPane 3.8s ease-in-out infinite alternate}
.right{left:50%;right:0;background:linear-gradient(150deg,#d2b994,#e4d5b8);animation:rightPane 3.8s ease-in-out infinite alternate}
.chart{position:absolute;left:18%;right:18%;top:25%;height:42%;display:flex;align-items:end;gap:5%;border-bottom:1px solid #34413c88}
.chart i{flex:1;height:38%;background:#62786d}.chart i:nth-child(2){height:68%}.chart i:nth-child(3){height:48%}.chart i:nth-child(4){height:80%}.chart i:nth-child(5){height:58%}
.right .chart i{background:var(--accent-2)}.right .chart i:nth-child(2){height:42%;background:var(--accent-3)}.right .chart i:nth-child(3){height:76%}.right .chart i:nth-child(4){height:52%}.right .chart i:nth-child(5){height:92%}
.pane b{position:absolute;left:12px;top:12px;font:9px ui-monospace,monospace;letter-spacing:.1em;color:#2b332e}
.divider{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--fg);transform:translateX(-50%);animation:split 3.8s ease-in-out infinite alternate;cursor:ew-resize}
.divider i{position:absolute;left:50%;top:50%;width:20px;height:34px;border:1px solid var(--fg);background:var(--surface);transform:translate(-50%,-50%);border-radius:8px}
.labels{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:#26312d}
@keyframes split{0%{left:38%}100%{left:64%}}
@keyframes leftPane{0%{right:62%}100%{right:36%}}
@keyframes rightPane{0%{left:38%}100%{left:64%}}

const stage=document.getElementById('stage'),divider=document.getElementById('divider');
const left=stage.querySelector('.left'),right=stage.querySelector('.right');
let dragging=false;
divider.addEventListener('pointerdown',e=>{dragging=true;divider.setPointerCapture(e.pointerId);divider.style.animation='none';left.style.animation='none';right.style.animation='none'});
divider.addEventListener('pointermove',e=>{if(!dragging)return;const r=stage.getBoundingClientRect(),pct=Math.max(.2,Math.min(.8,(e.clientX-r.left)/r.width))*100;divider.style.left=pct+'%';left.style.right=(100-pct)+'%';right.style.left=pct+'%'});
divider.addEventListener('pointerup',()=>dragging=false);