웹사이트 연출 24

첫 화면에 패럴랙스 스크롤을 넣어줘. 산 그림 세 겹 중 뒤쪽은 스크롤 속도의 0.55배, 가운데는 0.3배로 움직이고 맨 앞은 그대로. 제목은 0.8배. 동작 줄이기 설정이면 멈춰.

카드들이 화면에 25% 들어오면 아래에서 18px 올라오며 0.6초 동안 페이드인되게 해줘. ease-out, 한 번 나타나면 다시 숨지 않게. IntersectionObserver 로.

헤더를 position: sticky 로 맨 위에 고정해줘. 스크롤이 4px 넘으면 아래쪽에 옅은 그림자와 1px 선이 0.25초에 걸쳐 생기게. 배경은 92% 불투명 흰색에 살짝 흐림.

「사용법」 섹션을 화면에 고정(sticky)하고, 스크롤 세 구간 동안 번호·문장·그림이 01→02→03 으로 바뀌게 해줘. 셋째가 끝나면 고정이 풀리고 다음 섹션으로. 지금 단계를 점 세 개로 표시.

작품 카드 다섯 장을 가로 스크롤 섹션으로 만들어줘. 섹션이 화면에 닿으면 고정되고, 세로 스크롤한 만큼 카드 줄이 왼쪽으로 이동해 마지막 카드가 보이면 고정이 풀리게.

세 섹션에 스크롤 스냅을 걸어줘. scroll-snap-type: y mandatory, 각 섹션 높이는 화면 전체, 시작 위치에 맞춰 멈추게.

글 페이지 맨 위에 3px 짜리 스크롤 진행 막대를 붙여줘. 읽은 비율만큼 왼쪽에서 늘어나게 scaleX 로, 색은 강조색. role=progressbar 와 aria-valuenow 도.

본문의 핵심 문구 두 곳에 형광펜 애니메이션을 넣어줘. 글자 아래 42% 높이에 노란색, 화면에 다 들어오면 0.8초 동안 왼쪽에서 오른쪽으로 칠해지게. 한 번만.

숙소 카드에 호버 리프트를 넣어줘. 올리면 위로 5px, 그림자 0 12px 22px, 0.2초 ease-out. 키보드 포커스에도 같은 모양. 동작 줄이기면 그림자만.

사진 카드에 호버 줌을 넣어줘. 틀은 overflow: hidden 으로 고정하고 안의 이미지만 1.1배로 0.45초 동안 확대. 포커스에도 같이.

첫 화면에 커서 따라오기를 넣어줘. 지름 30px 주황 원이 커서를 매 프레임 거리의 12%씩 따라가게(lerp). 글자 위에선 multiply 로 겹치게. 터치 기기와 동작 줄이기에선 끄기.

「문의하기」 버튼을 자석 버튼으로 만들어줘. 커서가 버튼 중심 110px 안에 들어오면 거리의 35%만큼 커서 쪽으로 움직이고, 벗어나면 0.25초에 제자리로. 동작 줄이기면 끄기.

「보내기」 버튼에 리플 효과를 넣어줘. 누른 좌표에서 버튼 크기 2.2배 원이 0.6초 동안 커지며 투명해지게, 흰색 45%. 키보드로 누르면 가운데서.

상단 메뉴 링크에 밑줄 애니메이션을 넣어줘. 2px 강조색 선이 ::after 로 scaleX 0→1, transform-origin left, 0.25초 ease-out. 포커스에도 같이, 지금 페이지 메뉴는 늘 그어져 있게.

전후 비교 슬라이더를 만들어줘. 두 사진을 겹치고 위 사진을 clip-path 로 잘라 보여 주기, 가운데 흰 선과 ↔ 손잡이. 실제 조작은 투명한 input type=range 로 해서 키보드 화살표로도 움직이게.

떠날 때 팝업을 넣어줘. 커서가 창 위쪽 끝(8px 안)으로 빠져나가면 한 번만 띄우고, 같은 방문에선 다시 안 띄우기. 「괜찮아요」와 Esc 로 닫히고, 열리면 첫 버튼에 포커스.

첫 방문에 로딩 화면을 넣어줘. 검은 덮개에 0~100% 숫자와 주황 진행선, 100% 가 되면 0.25초 쉬고 0.6초 동안 위로 걷히게. 실제 로딩이 끝났을 때만 걷히고, 숫자는 role=status.

갤러리 이미지를 지연 로딩으로 바꿔줘. img 에 loading="lazy" 와 크기(width·height)를 넣어 자리를 먼저 잡고, 오기 전엔 회색 칸에 빛이 지나가는 무늬, 다 오면 흐림에서 0.5초 동안 또렷해지게.

첫 화면 문구 「오늘은 ○○」의 ○○ 자리에 타이핑 효과를 넣어줘. 걷기·읽기·쓰기를 한 자에 0.15초로 쓰고 1.3초 멈춘 뒤 0.07초씩 지우기, 깜빡이는 커서 막대. 읽기 프로그램용 aria-label 은 전체 문장으로.

목록에서 상세로 넘어갈 때 페이지 전환을 넣어줘. 검은 막이 아래에서 0.35초에 덮고, 덮인 순간 내용을 바꾸고, 위로 0.35초에 걷히게. 지원 브라우저면 View Transitions API 로, 동작 줄이기면 그냥 바꾸기.

상단 메뉴 링크와 「맨 위로」 버튼에 부드러운 스크롤을 넣어줘. scroll-behavior: smooth, 고정 헤더에 가리지 않게 scroll-margin-top 40px. 동작 줄이기면 바로 이동.

「DESIGN · MOTION · CODE · PLAN」을 흐르는 띠로 만들어줘. 같은 내용을 두 번 이어 붙여 14초에 -50% 이동하면 끊김 없이 돌게, 마우스를 올리면 멈추게. 읽기 프로그램엔 한 번만 읽히게.

첫 화면 배경에 움직이는 그라데이션을 넣어줘. 복숭아·분홍·하늘·파랑 네 색 linear-gradient 를 300% 크기로 두고 background-position 을 12초에 왕복. 글자 대비는 늘 4.5:1 이상, 동작 줄이기면 멈춘 한 장.

폰 목업 옆 배지 셋에 둥실 효과를 넣어줘. 위아래 9px, 3.2초·3.8초·3.2초로 박자를 다르게, 시작점(animation-delay)도 어긋나게. 본문이 아니라 장식에만.