소셜 캐러셀은 한 게시물 안에서 여러 장을 넘기며 정보를 단계적으로 읽게 합니다. 표지는 다음 장을 볼 이유를 명확히 해야 합니다.
데모는 문제, 근거, 적용, 저장 요청 순서로 카드가 움직입니다. 한 장에는 한 가지 주장만 두면 흐름을 따라가기 쉽습니다.
마지막 장까지 봤다는 가정으로 핵심을 숨기지 마세요. 각 장도 독립적으로 읽혀야 합니다.
언제 쓰나
절차, 체크리스트, 비교처럼 순서가 있는 내용을 게시할 때 씁니다.
소셜 캐러셀
Social carousel
첫 장의 약속을 여러 장의 정보와 마지막 행동으로 연결합니다.
···
<div class="s-demo"><div class="sc"><div class="sc-stack"><div class="sc-slide">01<small>THE PROBLEM</small></div><div class="sc-slide">02<small>THE EVIDENCE</small></div><div class="sc-slide">03<small>THE ACTION</small></div><div class="sc-slide">04<small>SAVE THIS</small></div></div><div class="sc-dots"><i></i><i></i><i></i><i></i></div></div></div>.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.sc{text-align:center}.sc-stack{position:relative;width:clamp(95px,31vmin,200px);height:clamp(105px,34vmin,220px);margin:auto}.sc-slide{position:absolute;inset:0;display:grid;place-content:center;background:var(--accent-2);color:#211b19;border:2px solid var(--fg);font-size:clamp(30px,9vmin,60px);font-weight:900;opacity:0;animation:scpage 8s infinite}.sc-slide small{font-size:clamp(10px,max(2.5vmin,1vw),15px)}.sc-slide:nth-child(2){background:var(--accent);color:white;animation-delay:2s}.sc-slide:nth-child(3){background:var(--surface);color:var(--fg);animation-delay:4s}.sc-slide:nth-child(4){background:var(--fg);color:var(--bg);animation-delay:6s}.sc-dots{display:flex;justify-content:center;gap:5px;margin-top:clamp(6px,2vmin,13px)}.sc-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.sc-dots i:first-child{background:var(--accent)}@keyframes scpage{0%,23%{opacity:1;transform:translateX(0) rotate(0)}27%,100%{opacity:0;transform:translateX(-25px) rotate(-8deg)}}