05シールのレビュー重ね
重なって斜めに置かれたレビューシール3枚が交代で前に出て、出る枚は傾きがまっすぐになり8px浮き、残りは後ろに下がります。
使いどころレビュー・推薦カード、イベント告知シール
rotatetranslateYz-index
<main class="stage">
<section class="stickm">
<article class="stickm__card stickm__card--one">
<p class="stickm__stars" aria-label="星5つ中5つ">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59m-15.34 5.47l-48.7 42a8 8 0 0 0-2.56 7.91l14.88 62.8a.37.37 0 0 1-.17.48c-.18.14-.23.11-.38 0l-54.72-33.65a8 8 0 0 0-8.38 0l-54.72 33.67c-.15.09-.19.12-.38 0a.37.37 0 0 1-.17-.48l14.88-62.8a8 8 0 0 0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16a8 8 0 0 0 6.72-4.94l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153 91.86a8 8 0 0 0 6.75 4.92l63.92 5.16c.15 0 .24 0 .33.29s0 .4-.16.5"/></g></svg>
</p>
<p class="stickm__quote">「コードが分からなくても貼ってできました」</p>
<p class="stickm__name">デザイナー・ジス</p>
</article>
<article class="stickm__card stickm__card--two">
<p class="stickm__stars" aria-label="星5つ中5つ">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59m-15.34 5.47l-48.7 42a8 8 0 0 0-2.56 7.91l14.88 62.8a.37.37 0 0 1-.17.48c-.18.14-.23.11-.38 0l-54.72-33.65a8 8 0 0 0-8.38 0l-54.72 33.67c-.15.09-.19.12-.38 0a.37.37 0 0 1-.17-.48l14.88-62.8a8 8 0 0 0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16a8 8 0 0 0 6.72-4.94l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153 91.86a8 8 0 0 0 6.75 4.92l63.92 5.16c.15 0 .24 0 .33.29s0 .4-.16.5"/></g></svg>
</p>
<p class="stickm__quote">「LPが1週間で終わりました」</p>
<p class="stickm__name">創業者・ミンジュン</p>
</article>
<article class="stickm__card stickm__card--three">
<p class="stickm__stars" aria-label="星5つ中5つ">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 0 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59m-15.34 5.47l-48.7 42a8 8 0 0 0-2.56 7.91l14.88 62.8a.37.37 0 0 1-.17.48c-.18.14-.23.11-.38 0l-54.72-33.65a8 8 0 0 0-8.38 0l-54.72 33.67c-.15.09-.19.12-.38 0a.37.37 0 0 1-.17-.48l14.88-62.8a8 8 0 0 0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16a8 8 0 0 0 6.72-4.94l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153 91.86a8 8 0 0 0 6.75 4.92l63.92 5.16c.15 0 .24 0 .33.29s0 .4-.16.5"/></g></svg>
</p>
<p class="stickm__quote">「波の境界を盗んで帰りました」</p>
<p class="stickm__name">フロントエンド・アラ</p>
</article>
</section>
</main>@use "../../../../site/static/demo-tokens" as *;
// 멤피스 팔레트 — 01 과 같은 값
$mem-base: #fdf4ec;
$mem-sheet: #ffffff;
$mem-ink: #241f26;
$mem-stone: #5d5560;
$mem-coral: #d5aea9;
$mem-lemon: #cec29c;
$mem-sky: #82adc2;
$mem-mint: #71b9ab;
$mem-pink: #ebd6db;
$duration: $dur-loop; // 스티커 세 장이 한 바퀴 도는 주기
$easing: $ease-out; // 앞으로 나올 때도 물러날 때도 같은 속도로
$color: $mem-pink; // 무대(핑크)
@include stage($mem-pink);
.stickm {
position: relative;
width: clamp(240px, 76vw, 340px);
height: clamp(168px, 52vh, 232px);
}
// 후기 스티커 — 세 장이 비스듬히 겹쳐 쌓여 있다
.stickm__card {
position: absolute;
box-sizing: border-box;
width: clamp(176px, 56vw, 250px);
padding: $sp-3 $sp-4;
border-radius: $r-card;
background: $mem-sheet;
border: 3px solid $mem-ink;
box-shadow: 0 5px 0 $mem-ink;
animation: toFront $duration $easing infinite;
}
.stickm__card--one {
left: 0;
top: 6px;
z-index: 1;
--tilt: -7deg;
}
.stickm__card--two {
right: 0;
top: 26px;
z-index: 2;
--tilt: 4deg;
animation-delay: -.6667s;
}
.stickm__card--three {
left: 24px;
bottom: 0;
z-index: 3;
--tilt: 9deg;
animation-delay: -1.3333s;
}
.stickm__stars {
margin: 0 0 $sp-1;
color: $mem-coral;
font-size: 16px;
line-height: 1;
}
.stickm__quote {
margin: 0;
color: $mem-ink;
font-weight: 700; font-size: clamp(12px, 2.9vw, 14.5px); line-height: 1.35;
font-family: inherit;
}
.stickm__name {
margin: $sp-1 0 0;
color: $mem-stone;
font-weight: 500; font-size: clamp(10px, 2.4vw, 11.5px); line-height: 1;
font-family: inherit;
}
// 제 차례(자기 1/3 창)에 기울기가 펴지며 8px 들어와 앞으로 나오고, 창이 끝나면 제 각도로 물러난다
@keyframes toFront {
0% { transform: rotate(var(--tilt)) translateY(0); }
6%, 28% { transform: rotate(0deg) translateY(-8px); }
34%, 100% { transform: rotate(var(--tilt)) translateY(0); }
}
@media (max-width: 340px), (max-height: 220px) {
.stickm { width: 216px; height: 156px; }
.stickm__card { width: 160px; padding: $sp-2 $sp-3; }
.stickm__card--two { top: 22px; }
.stickm__card--three { left: 16px; }
.stickm__stars { font-size: 13px; }
.stickm__quote { font-size: 11px; }
.stickm__name { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
.stickm__card { animation: none !important; transform: rotate(var(--tilt)); }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ebd6db;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.stickm {
position: relative;
width: clamp(240px, 76vw, 340px);
height: clamp(168px, 52vh, 232px);
}
.stickm__card {
position: absolute;
box-sizing: border-box;
width: clamp(176px, 56vw, 250px);
padding: 12px 16px;
border-radius: 16px;
background: #ffffff;
border: 3px solid #241f26;
box-shadow: 0 5px 0 #241f26;
animation: toFront 2s ease-out infinite;
}
.stickm__card--one {
left: 0;
top: 6px;
z-index: 1;
--tilt: -7deg;
}
.stickm__card--two {
right: 0;
top: 26px;
z-index: 2;
--tilt: 4deg;
animation-delay: -0.6667s;
}
.stickm__card--three {
left: 24px;
bottom: 0;
z-index: 3;
--tilt: 9deg;
animation-delay: -1.3333s;
}
.stickm__stars {
margin: 0 0 4px;
color: #d5aea9;
font-size: 16px;
line-height: 1;
}
.stickm__quote {
margin: 0;
color: #241f26;
font-weight: 700;
font-size: clamp(12px, 2.9vw, 14.5px);
line-height: 1.35;
font-family: inherit;
}
.stickm__name {
margin: 4px 0 0;
color: #5d5560;
font-weight: 500;
font-size: clamp(10px, 2.4vw, 11.5px);
line-height: 1;
font-family: inherit;
}
@keyframes toFront {
0% {
transform: rotate(var(--tilt)) translateY(0);
}
6%, 28% {
transform: rotate(0deg) translateY(-8px);
}
34%, 100% {
transform: rotate(var(--tilt)) translateY(0);
}
}
@media (max-width: 340px), (max-height: 220px) {
.stickm {
width: 216px;
height: 156px;
}
.stickm__card {
width: 160px;
padding: 8px 12px;
}
.stickm__card--two {
top: 22px;
}
.stickm__card--three {
left: 16px;
}
.stickm__stars {
font-size: 13px;
}
.stickm__quote {
font-size: 11px;
}
.stickm__name {
font-size: 9.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.stickm__card {
animation: none !important;
transform: rotate(var(--tilt));
}
}import type { CSSProperties, ReactNode } from "react";
import styles from "./StickerTestimonialMemphis.module.scss";
export type StickerTestimonialMemphisItem = { quote: string; name: string };
export type StickerTestimonialMemphisProps = {
/** 후기 스티커 3장 */
items?: StickerTestimonialMemphisItem[];
/** 별점 스크린리더 라벨 */
starsLabel?: string;
/** 한 주기(기본 2000ms) */
duration?: number;
easing?: string;
/** 데모 무대 색(참고용) */
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
/* Phosphor duotone 별 — 색은 currentColor(코랄) */
const STAR: ReactNode = (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="m229.06 108.79l-48.7 42l14.88 62.79a8.4 8.4 0 0 1-12.52 9.17L128 189.09l-54.72 33.65a8.4 8.4 0 0 1-12.52-9.17l14.88-62.79l-48.7-42A8.46 8.46 0 0 1 31.73 94l63.91-5.2l24.62-59.6a8.36 8.36 0 0 1 15.48 0l24.62 59.6l63.91 5.2a8.46 8.46 0 0 1 4.79 14.79" opacity=".2"/><path d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59m-15.34 5.47l-48.7 42a8 8 0 0 0-2.56 7.91l14.88 62.8a.37.37 0 0 1-.17.48c-.18.14-.23.11-.38 0l-54.72-33.65a8 8 0 0 0-8.38 0l-54.72 33.67c-.15.09-.19.12-.38 0a.37.37 0 0 1-.17-.48l14.88-62.8a8 8 0 0 0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16a8 8 0 0 0 6.72-4.94l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153 91.86a8 8 0 0 0 6.75 4.92l63.92 5.16c.15 0 .24 0 .33.29s0 .4-.16.5"/></g></svg>
);
const CARDS = [styles.cardOne, styles.cardTwo, styles.cardThree];
export default function StickerTestimonialMemphis({
items = [
{ quote: "“코드 몰라도 붙여서 됐어요”", name: "디자이너 지수" },
{ quote: "“랜딩이 한 주에 끝났어요”", name: "창업자 민준" },
{ quote: "“물결 경계를 훔쳐갔어요”", name: "프론트 아라" },
],
starsLabel = "별 5개 중 5개",
duration = 2000,
easing = "ease-out",
color = "#ff8fab",
}: StickerTestimonialMemphisProps) {
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
return (
<section className={styles.stickm} style={vars}>
{items.map((it, i) => (
<article key={it.name} className={`${styles.card} ${CARDS[i % CARDS.length]}`}>
<p className={styles.stars} aria-label={starsLabel}>{STAR}</p>
<p className={styles.quote}>{it.quote}</p>
<p className={styles.name}>{it.name}</p>
</article>
))}
</section>
);
}05 シールのレビュー重ね — 計測 累積面積 15.901% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · メンフィス デザインのLPパーツ9選、コピペOK
このデモが属する記事
メンフィス デザインのLPパーツ9選、コピペOKメンフィス デザインとは、1980年代のミラノ生まれの、水玉・波線・ジグザグなどの幾何学形を明るい色の上に繰り返すスタイルです。画像を一枚も使わず、CSSグラデーションのタイルと図形だけでこのパターンを再現し、ランディングのセクション9つに この記事のデモをすべて見る
