스크롤 기능] 스크롤 기능에 필요(?)한 재료들.. method

1)
스크롤 기능을 구현(?)하기 위해..라기보다는,

스크롤 기능이 가진 기능을
어떤 관점에서 봐야 구현하기 좋을지..라는 생각을 잠깐 서술해봅니다.

2)
view top : 표시화면 최상단입니다. 이미지가 사라질 듯..할 때의 위치가 되죠.
view bottom : 표시화면 최하단입니다. 이미지가 나타나기 시작할때..쯤의 위치가 되죠.
image top : 표시 이미지의 상단위치입니다. view 에 나타날때쯤..이 언제인지가 중요하니까요.
image bottom : 표시 이미지의 하단위치입니다. view 에서 완전히 사라질때..나, 표시화면의 바닥을 치고싶을(?) 때 사용할 수 있겠죠.

위에서 image 라고 표시를 했습니다만,
실제로는 div 등의 범위형 element 도 사용될겁니다.

3)
view left : 표시화면의 좌측입니다. 끝을 잡아야할 때가 있을테니까요.
view right : 표시화면의 우측입니다. 역시 끝을 잡아야할 때가 있을테니까요.
image left : 표시 이미지의 좌측위치입니다.
image right : 표시 이미지의 우측위치입니다.

좌우 스크롤을 PC에서 일반적으로 사용할 일은 없습니다만,
상하스크롤 외의 부분을 위해서..라는 표현이면 될까요..

최근에 제가 고심(?)하고있는 파노라마 이미지 표시..의 경우가 그렇겠죠.

4)
scroll event : 스크롤이 구현되는 동작 후의 event 입니다. 표시화면이 어디를 잡고(?)있는지 추적할 때 쓰게될겁니다.
mouseover event : 이미지나 위치 위에 마우스가 올라간 경우의 event 입니다. 스크롤에만 국한될 이벤트는 아닙니다만, 마우스가 올라가있는 이미지의 offsetTop 을 계산하는데 이용될 수 있을거라는 생각도 해봅니다.

5)
스크롤..의 경우, 안보이는(?) 이미지를 일찍부터 불러올 필요는 없을지 몰라도,
가용(?) 스크롤범위 내에서의 이미지를 준비할 필요성은 있을겁니다.

onload: 이미지 불러왔어요~..라는 멘트를 날려주시는 event 입니다. 다음에 불러올 이미지를 체크하는데 도움을 주게 되겠죠.

scroll event 와 함께 사용하는게 맞을 것 같습니다만.. 뭐랄까요..
scroll event 와 join 시키기 위해서는, 이미지 각각의 offsetTop 과 offsetSize(Width, Height) 가 필요할겁니다.
물론, 표시 기준의 크기입니다. 미리부터 설정해 놓는다면 나중에 크기변환에 따른 출렁임(이미지 위치조정중에 생기는..)은 안 느껴도 되겠죠.

...

대충 이정도일 것 같네요.

scroll 을 이용한 HTML 구현의 주의점..이라는 타이틀일 수도 있습니다만,
잠깐 생각난 김에 적어봤습니다.

smallLet killofki@.


덧글

댓글 입력 영역

분석기


한국파워블로거협동조합 배너

http://cafe.naver.com/powerbloggeraliance

구글 Adsense

구글검색

애드센스 긴거

meta Loader