스크롤을 내릴 때 제목이 서서히 떠오르거나 이미지가 옆에서 슬며시 들어오는 효과, 코드를 몰라도 cmshom.com 무료 웹디자인 에디터에서 클릭 몇 번으로 적용할 수 있습니다. 별도 라이브러리를 찾아서 연결할 필요도 없습니다.
캔버스에서 움직임을 주고 싶은 제목이나 이미지, 카드 요소를 선택합니다. 페이지 맨 위 큰 제목이나 섹션이 바뀌는 지점에 적용하면 효과가 잘 드러납니다. 여러 개를 한꺼번에 고르고 싶다면 다중선택으로 묶어서 같이 지정할 수도 있습니다.
선택한 요소에 스크롤 애니메이션을 켜면 화면에 들어올 때 나타나는 방식을 고를 수 있습니다. 페이지 위에서부터 순서대로 하나씩 적용해가면서 전체 흐름을 만들면 됩니다. 어떤 요소에 애니메이션이 걸려 있는지 헷갈릴 때는 레이어 트리를 열어서 전체 목록을 순서대로 확인하면 됩니다.
브라우저 미리보기를 열고 실제로 마우스 휠을 굴려보면서 원하는 타이밍에 요소가 나타나는지 확인합니다. 어색하면 다시 캔버스로 돌아가 옵션을 조정하고, undo·redo로 이전 상태로 되돌리는 것도 자유롭습니다.
스크롤 애니메이션을 하나라도 썼다면 ZIP을 내려받았을 때 다음 파일이 함께 들어 있습니다.
<script src="js/gsap.min.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<script src="js/script.js"></script>js/script.js 안에는 캔버스에서 지정한 애니메이션이 이미 코드로 정리되어 있어서, 압축을 풀고 index.html을 열기만 하면 스크롤 효과가 그대로 재현됩니다. 인터넷이 연결돼 있지 않아도 동작합니다.
애니메이션은 과하게 쓰면 오히려 페이지가 산만해 보일 수 있으니 제목이나 핵심 이미지 위주로 몇 군데만 적용하는 걸 권합니다. 같은 방식의 움직임을 페이지 전체에 반복해서 쓰면 리듬이 생기고, 반대로 섹션마다 다른 효과를 쓰면 오히려 산만해지기 쉽습니다. 페이지 골격을 다 잡은 다음 마지막 단계에서 애니메이션을 얹는 순서로 작업하면 수월합니다.
더 손이 많이 가는 사이트를 원하시면 AI 홈페이지 3분 개설(/ai-start)이나 10만원 제작 문의도 열려 있습니다.