실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
가로 스크롤 영역에 CSS 몇 줄만 주면 손을 떼는 순간 카드가 자석처럼 달라붙어요. 캐러셀 라이브러리 없이 터치/트랙패드/드래그 관성까지 공짜로 따라옵니다.
offset-path로 따라갈 곡선을 한 번 정의하면 offset-distance만 0%에서 100%로 바꿔 요소가 그 길을 따라 이동합니다. x/y 키프레임이나 JS 좌표 계산 없이 곡선 모션을 만들 수 있어요.
행을 손가락으로 밀어 숨은 액션을 꺼내고, 끝까지 밀면 바로 삭제. 드래그 중 리렌더 없이 ref로 직접 움직이는 Pointer Events 스와이프 리스트입니다.
ECMAScript 2025 Set 메서드 시각화 + 미지원 환경 폴백
보내면 즉시 표시(전송 중) 후 저장 완료 시 확정 - form action과 결합
document.startViewTransition + view-transition-name으로 SPA 라우터 없이 모핑
실수 클릭으로 삭제되는 사고를 막는 press-and-hold 버튼. 누르고 있으면 링이 차오르고, 끝까지 채워야 실행됩니다.
스크롤 진행에 맞춰 문장이 단어 단위로 흐림→선명하게 차오르는 modern 랜딩 텍스트 연출.
스위치를 누르면 해가 달로 바뀌고, 하늘이 낮에서 밤으로 전환되며 구름이 별로 교차하는 애니메이션 토글입니다.
좋아요 버튼에 마우스를 올리거나 탭하면 👍❤️😆😮😢😡 반응이 떠오르고, 하나를 고르면 버튼이 그 반응으로 바뀌는 SNS식 리액션입니다.
앞면과 뒷면을 겹쳐두고 입체로 뒤집어 정보를 전환하는 카드.
복권처럼 표면을 긁으면 상품이 드러나고, 일정 비율을 넘으면 자동 공개.
이미지 위 커서/터치 지점을 확대 렌즈로 크게 보여주는 hover 줌.
여러 문구를 한 글자씩 입력하고, 멈췄다 지우고 다음 문구로 넘어가는 타이핑 효과.
남은 시간이 줄면 바뀐 자릿수만 위에서 아래로 접히는 클래식 플립 클럭.
포인터·터치에 레이어마다 다른 비율로 움직여 깊이를 만드는 패럴랙스 장면.
포인터를 따라 빛의 잔상이 따라오는 canvas 트레일 — 파티클/스네이크 두 방식.
세로 스크롤 진행도를 translateX로 바꿔 카드가 옆으로 흐르는 sticky 갤러리.
누른 좌표에서 잉크가 번지는 리플 — 다중 동시 발생과 자동 정리.
색·굵기·지우개를 바꿔가며 자유롭게 그리고 PNG로 저장하는 canvas 드로잉 보드. DPR 보정으로 또렷한 선과 실제 크기 커서까지.
각 자릿수가 0~9 세로 스트립으로 굴러가 제자리를 찾는 기계식 카운터. transform만 써서 JS 애니메이션 루프 없이 부드럽게 동작합니다.
항목을 끌어 순서를 바꾸면 다른 항목이 부드럽게 비켜주고 순위 배지가 실시간으로 갱신됩니다. 라이브러리 없이 Pointer Events로 구현하고 키보드 이동까지 지원해요.
클릭한 자리에서 종이조각이 분출되는 효과. canvas 2D + RAF만으로 — 라이브러리 0, 5KB 이하.
pointer 좌표를 CSS 변수로 넘겨 테두리·본문이 커서를 따라 빛남
사용자가 페이지 하단으로 스크롤할 때 자동으로 다음 데이터를 로드합니다. SNS, 뉴스피드, 쇼핑몰에서 필수적인 패턴입니다.
무작위 문자로 흩어진 글자가 시차를 두고 제자리를 찾는 디코드 효과. RAF 프레임 큐로 글자마다 다른 타이밍에 풀린다.
마우스 위치를 perspective 회전으로 변환하고, 광택과 시차 깊이감까지 더한 awwwards풍 카드 인터랙션.
드래그·터치·키보드로 before/after 두 이미지를 가르는 클래식 비교 컴포넌트. clip-path inset + Pointer Events + role="slider".
24×18 픽셀짜리 LQIP을 먼저 받아 흐릿하게 깔아두고, 원본이 도착하면 부드럽게 페이드인. 빈 회색 박스를 보지 않으니 체감 속도가 확 빨라지는 클래식 패턴.
사용자가 본문에 집중할 때는 헤더가 슬쩍 비켜주고, 다시 위로 의도를 표현하면 부드럽게 따라 올라옵니다. useScrollDirection 훅 + translate-y 트랜지션 조합.
