인터랙션을 단계별로 추상화하여 웹 페이지 개편하기
주니어 개발자의 좌충우돌 웹사이트 개편기
조영록
두번의 웹사이트 개편을 겪은 이야기
각 웹페이지 모두 동적인 인터랙션이 사용되었어요
수학 제품 페이지
knowre 회사 페이지
열기구와 배경, 구름들
scroll-snap & none-scroll-snap
수학 제품 페이지는 두 영역으로 나뉘어져 있어요
스크롤 스냅 영역에서는 여러 오브젝트들이 존재해요
scroll-snap & none-scroll-snap
scroll-snap & none-scroll-snap
그러나 늘 계획대로 되지는 않아요 😭
사파리 브라우저 가변 주소창
scroll-snap 과 스크롤 실행 코드의 충돌
이렇게 해서 첫번째 페이지가 완성되었습니다
다른 페이지의 인터렉션도 살펴보아요!
커스텀 커서 인터렉션
이 애니메이션은 어떻게 구성될까요?
이 애니메이션은 어떻게 구성될까요?
커서 움직임에 따라 각 요소들이 부드럽게 반응해요
스크롤에 따라 일부 원들이 위로 떠올라요
마우스 hover 시에 주변의 원들이 흩어짐 (css `has`)