CSS 스크롤 애니메이션 빌더
효과, 거리, 시간, easing을 선택해 JavaScript 없이도 보이고 동작 감소 설정을 따르는 CSS를 생성하세요.
값을 선택한 뒤 생성하세요. 로컬에서 생성되며 JavaScript가 없어도 fallback이 보입니다.
사용 방법
사용 방법
- 효과와 제한된 숫자를 선택합니다.
- 생성된 CSS와 선택적 observer 스크립트를 복사합니다.
- 요소에 클래스를 적용하고 키보드와 동작 감소를 확인합니다.
제한된 출력
값을 안전한 범위로 제한하고 생성 텍스트를 200자로 제한합니다.
점진적 향상
JavaScript나 Observer가 없으면 계속 보이고, 지원 시 한 번 재생합니다.
동작 선호
prefers-reduced-motion이 전환을 끄고 표시를 유지합니다.
자주 묻는 질문
더 알아보기
라이브러리가 필요한가요?
아니요. CSS와 지원되는 Observer만 사용합니다.
JavaScript가 없으면요?
기본 상태가 보이므로 계속 표시됩니다.
카드에도 쓸 수 있나요?
네. 각 요소에 클래스를 추가하면 개별 표시됩니다.