IROUL
회원가입로그인
뒤로가기
CSS 유틸리티

.scroll-reveal-blur - Blur fade-up reveal CSS 유틸

opacity / translateY / filter blur가 한 번에 풀리며 멀리서 또렷해지는 듯한 깊이감 등장 효과. JS 트리거와 책임 분리.

Tailwind CSS v4CSS transitionCSS filter
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

왜 blur까지 함께 푸는가

opacity와 translateY만 있는 일반 fade-up은 이미 흔합니다. 여기에 filter blur를 함께 풀면 카드가 단순히 미끄러져 나타나는 게 아니라 "멀리서 또렷해지며 다가오는" 듯한 깊이감이 생기고, 사용자 시선을 카드의 콘텐츠로 빠르게 끌어당깁니다.

JS와 책임 분리

이 클래스는 hidden 상태와 transition만 정의합니다. 트리거(언제 .revealed를 추가할지)는 IntersectionObserver든, 스크롤 progress든, 단순 setTimeout이든 어떤 것이든 결합 가능합니다. 함께 쓰는 가장 간단한 짝은 별도 스니펫의 useScrollReveal 훅입니다.

접근성

prefers-reduced-motion 미디어 쿼리에서 모든 transformfiltertransition을 즉시 종료 상태로 고정합니다. 모션 감소를 켠 사용자는 카드가 처음부터 보이게 됩니다.

언제 좋은가

  • opacity + translateY만보다 훨씬 풍부한 깊이감

  • JS 책임이 별도 스니펫의 useScrollReveal 훅입니다.

소스 코드

globals.csscss
.scroll-reveal-blur {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
 filter: blur(16px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-blur.revealed {
 opacity: 1;
  transform: translateY(0) scale(1);
  filter:blur(0);
}

@media (prefers-reduced-motion: reduce) {
 .scroll-reveal-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
46조회수

댓글