페이드 업 (기본 중의 기본)
숨김 상태(투명+아래로 이동)를 CSS로 정의하고, 화면 진입 시 클래스 하나를 붙인다. 모든 등장 효과의 뼈대.
AI에게 이렇게“섹션이 화면에 들어오면 아래에서 위로 떠오르며 나타나게 해줘. IntersectionObserver로.”
핵심 코드스태거 그리드 (자식 순차 등장)
카드 목록·갤러리에서 자식들이 도미노처럼 순서대로 등장. 각 자식에 transition-delay: i×80ms만 주면 끝.
“카드 그리드가 화면에 들어오면 카드들이 순서대로 하나씩 나타나게(스태거) 해줘.”
핵심 코드클립 와이프 리빌
요소를 clip-path로 완전히 잘라뒀다가 진입 시 잘린 영역을 0으로. 이미지·배너가 닦이듯 드러난다. 방향은 inset의 변만 바꾸면 된다.
AI에게 이렇게“이미지가 화면에 들어오면 왼쪽부터 닦이듯이 드러나는 클립 리빌 넣어줘.”
핵심 코드라인 마스크 리빌 (고급 타이포)
각 줄을 overflow:hidden 상자로 감싸고 안쪽 텍스트를 아래(115%)에 숨겨뒀다 줄마다 시차를 두고 올린다. 어워즈 사이트 헤드라인의 표준.
AI에게 이렇게“헤드라인이 줄 단위로 마스크 아래에서 밀고 올라오는 라인 리빌 효과 만들어줘.”
핵심 코드스케일 + 블러 인
작고 흐릿한 상태에서 커지며 또렷해지는 등장. 숫자·키워드 강조에 잘 어울린다. filter는 GPU 부담이 있으니 큰 영역엔 남용 금지.
AI에게 이렇게“키워드가 흐릿하고 작게 시작해서 커지며 선명해지는 등장 효과 넣어줘.”
핵심 코드좌우 교차 슬라이드
목록의 홀수는 왼쪽, 짝수는 오른쪽에서 미끄러져 들어온다. :nth-child(odd/even)로 방향만 갈라주면 끝. 타임라인·피처 목록에.
AI에게 이렇게“항목들이 홀수는 왼쪽, 짝수는 오른쪽에서 교차로 슬라이드되며 나타나게 해줘.”
핵심 코드카운트업 (보일 때 세기)
통계 숫자가 화면에 보이는 순간 0부터 목표값까지 가속-감속으로 센다. 진입 전에 세면 아무도 못 보니 IntersectionObserver가 필수인 대표 사례.
AI에게 이렇게“통계 숫자가 화면에 보이면 0부터 목표값까지 차오르는 카운트업 애니메이션 넣어줘.”
핵심 코드커튼 이미지 리빌
이미지 위 색 커튼이 옆으로 걷히는 동시에 이미지가 살짝 줌아웃(1.25→1). 두 모션의 합이 에디토리얼한 고급감을 만든다.
AI에게 이렇게“이미지 위 색 오버레이가 옆으로 걷히면서 이미지가 살짝 줌아웃되는 커튼 리빌 만들어줘.”
핵심 코드타임라인 라인 드로잉
점이 찍히고 선이 자라 다음 점에 닿는다. 연혁·프로세스 다이어그램에서 진입할 때마다 구간이 이어지는 연출. SVG면 stroke-dashoffset으로도 동일.
AI에게 이렇게“타임라인이 화면에 들어오면 점이 찍히고 선이 자라나며 이어지게 해줘.”
핵심 코드