배경
Diagonal Stripes
사선 줄무늬가 이음매 없이 무한히 흐르는 순수 CSS 배경. repeating-linear-gradient로 사선 밴드를 만들고 background-position을 한 주기만큼 이동시켜 끊김 없는 스크롤을 구현하며, 속도가 다른 두 레이어로 시차 깊이감을 준다.
- 분류
- 배경
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DiagonalStripes-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| speed | number | 10 | 한 사이클 소요 시간(초). 클수록 느림. |
| color | string | #C084FC | 줄무늬 강조 색(기본 보라). |
| background | string | #08060E | 배경 색(근-블랙). |
| stripeWidth | number | 40 | 한 줄무늬 밴드 두께(px, 색+투명 합). |
| angle | number | 45 | 사선 각도(deg). 45는 우상향 대각선. |
| className | string | undefined | 루트 컨테이너에 적용할 추가 CSS 클래스. |