scroll을 움직여봅시다

다른 소스를 임포트합니다.

<script src='경로'>와 같은 소스를 사용해 다른 js소스를 링크할 수 있습니다. 이 js소스들은 다른 사람들이 만든 유용한 함수를 담고 있습니다. 이번 예제에서는 scrollByAnimated(거리)라는 함수를 링크해서 아주 쉽게 스크롤 애니메이션을 구현하였습니다.

스크립트 원리

document.body.scrollTop을 통해 현재 스크롤이 어디까지 와 있는지 거리값을 받아오고 이 값을 내가 가고자 하는 메뉴의 위치값에서 빼서 이동할 거리를 계산하여 scrollByAnimated함수에다가 이동할 거리를 알려주는 것입니다.

원리를 이해합시다.
어렵지 않아요.

원하는 위치에 글자를?

위치를 지정하려면 해당 태그(h2,p)의 position:absolute로 지정하구요, 그 태그가 들어있는 상자(section)의 position:relative로 되어있어야 left와 top속성을 위치를 원하는 곳에 놓을 수 있어요. position:relative는 단순히 쌓이는 속성이고, position:absolute,fixed는 절대위치를 지정하지요.

애니메이션도 준다면!

지난 시간에 수업했던 애니메이션도 활용해서 훨씬더 풍부한 페이지를 만들 수 있습니다. 우선 멈추어 있는 페이지부터 완성하고 차근차근 다른 효과를 추가합시다!! 먼저 배색을 생각하고 그다음에 포토샵으로 스케치를하고, 풀프레임 페이지는 정확한 원리를 알지 못한다면 무리해서 시도하지 마세요~