Advanced Skill Stack

1. 인터랙티브 비주얼 경험

방문자가 마우스를 움직이거나 스크롤할 때 웹사이트가 반응하도록 하여 몰입감을 높이는 기능

• 커스텀 커서 애니메이션: 마우스 포인터를 평범한 화살표가 아닌, 브랜드 로고나 특정 오브젝트로 바꿉니다. 클릭할 때마다 팡팡 터지는 효과나, 커서가 움직이는 경로를 따라 잔상이 남는 효과를 줄 수 있습니다.
• 패럴랙스 스크롤링 (Parallax Scrolling): 배경과 전경의 이동 속도를 다르게 하여 입체감을 주는 기술입니다. 단순히 아래로 내려가는 게 아니라, 스크롤에 따라 제품이 조립되거나 배경이 밤에서 낮으로 바뀌는 스토리텔링이 가능합니다.
• 웹 기반 3D (WebGL): 마우스로 직접 돌려볼 수 있는 3D 모델을 배치합니다. 예를 들어, 신발 판매 사이트라면 사용자가 신발을 직접 돌려보고 줌인하며 질감을 확인하게 할 수 있습니다.
  • 버튼 호버 효과
  • 페이지 전환 애니메이션
  • 버튼 클릭 시 물결 효과
  • 파티클 효과 → ex) 배경 떠다니는 입자

2. 특색 있는 UI/UX 요소

기존의 틀을 깨는 인터페이스 구성입니다.

• 수평 스크롤 (Horizontal Scroll): 아래가 아닌 옆으로 넘기는 방식입니다. 갤러리나 타임라인 형태의 포트폴리오 사이트에서 독특한 인상을 줍니다.
• 타이포그래피 중심 디자인: 이미지 없이 오직 거대한 글자들로만 화면을 꽉 채우고, 마우스를 올리면 글자 사이로 이미지가 슬쩍 보이는 방식입니다.
• 애니메이션 배경: 움직이는 배경을 만들어줍니다.

3. Box 디자인

• 3D 호버효과: 마우스를 올리면 3D로 기울어짐
• 글로우 펄스: 선택하면 테두리가 반짝임
• 페이드 인: 순차적으로 정보가 들어오게 하는 기능
• 네온효과: 네온사인처럼 빛남
• 타이핑 효과: 타이핑하는 것처럼 정보가 등장

이미지 효과

1. 호버 줌인 (Hover Zoom)