scroll] 따라오려는(?) 사진...

사진이 있고, 사진 밑에 글이 있을 때

글을 읽으려고 스크롤 내리면
사진이 "쫄래쫄래" 따라오려는(?) 형태를 띄면 어떨까...라는 생각을 해봤다.

... animation 을 위해 setTimeout() 을 적용한 형태가 아닌,
slide 처럼(?) scroll 에 따라가는 형태로...

...

<script>

function followPic110218_1(pe) {
  var e=pe.getElementsByTagName('img')[0]
    , peSt=pe.scrollTop, peSh=pe.scrollHeight, peCh=pe.clientHeight

    , eH=e.offsetHeight
    , holdHeight=parseInt(eH/2)
    , StMax=peSh-peCh-holdHeight

    , hookHeight=20
    , eSMax=peSh-peCh-eH+hookHeight;

  if (StMax<1) return;

  peSt=peSt>holdHeight?(peSt-holdHeight):0;

  e.style.top=parseInt(eSMax*peSt/StMax)+'px';
  }

function setTop110218_1(e) {
  var pe=e.parentNode;
  e.style.top=pe.scrollTop+'px';
  }

</script>

<div style="width:273px; height:400px; overflow:scroll;" onscroll=followPic110218_1(this); >
<img src=http://cfs.tistory.com/custom/blog/42/429787/skin/images/_img_1.jpg width=256 height=212
  style="position:relative;"
  onmouseover=setTop110218_1(this); onmouseout=followPic110218_1(this.parentNode); /><div
  style="padding:10px; background-color:#eeeeff;">
이 이미지는<br />
<br />신도림역에서<br />
구로공단역쪽으로<br />
<br />열심히<br />
자전거를<br />
타고<br />
달려오다가<br />
<br />물에<br />
담겨있는<br />
징검다리가<br />
<br />너무<br />
재미있게<br />
보여서<br />
<br />잠시<br />
찍는<br />
동안<br />
<br />지나가는<br />
자전거<br />
두대가<br />
지나간<br />
<br />램프<br />
빛의<br />
흔적을<br />
<br />보여주고<br />
있습니다.<br />
<br />- 작성 : killofki<br />
- 글 작성일 : 방금<br />

</div>
</div>

...

이 이미지는

신도림역에서
구로공단역쪽으로

열심히
자전거를
타고
달려오다가

물에
담겨있는
징검다리가

너무
재미있게
보여서

잠시
찍는
동안

지나가는
자전거
두대가
지나간

램프
빛의
흔적을

보여주고
있습니다.

- 작성 : killofki
- 글 작성일 : 방금

...

... 계산식을 보면 알겠지만,

초기에 이미지크기의 "반" 정도는 기본 스크롤에 따라갈 holdHeight,
가용(?) 스크롤값을 저장할 StMax,

최대 스크롤 했을 때 남길 hookHeight,
최대 스크롤 했을 때 적용 할 이미지의 위치 eSMax,

그리고,
스크롤값으로 지정할 peSt.

이정도가 이 함수의 설명이다.

...

적용해보니

1)
이미지에 최적화된 것으로 보이는 safari 에서는
스크롤에 따른 이미지 멀미현상이 안보였지만,

2)
다른 웹브라우져에서는
쬐금(?) 멀미가 난다...

... 이래서(?),
relative 를 쓰기가 싫었던 건가 = =;...

그리고

3)
이미지가 내려오지만,
글자가 이미지 위를 덮지 않고있다.
(사실, z-index 를 지정하려고 했는데, 지정 안해도 잘 보여서 없앴음.)

position:relative; 가 position:absolute; 와는 달라서

위에 있지 않을 줄 알았는데,
그건 아닌 듯.

4)
혹시나, 나눗셈...의 문제가 나올 것 같아서
StMax<1 인 경우에는 강제탈출 시켰다.

...

보너스(?)

5)
hookHeight 를 적용한 이유는,
스크롤 된 후에도 이미지를 보려는 생각이 들 것 같아서.

스크롤 중에도 해당 이미지 위에 마우스 올리면
이미지 위치를 잠깐(?) 재조정한다.

마우스가 해당 이미지 밖으로 나가면 (또는, 스크롤바 움직이면)
이미지 위치를 다시 스크롤 적용시점으로 넘긴다.

...

개조가능한(?) 기능

6)
여기에서는 계산식을 일일이 적용했는데,

음... 변수를 따로 div 에 적용해두면 (예를들어, pe.save1, pe.save2 형식으로?)
계산에 필요한 시간을 절약할 수 있다.

이번에는 퍼포먼스형식의 표시라
적용 안시킴.

7)
relative 형식으로만 적용해서 멀미가 나긴 하지만,
relative 로 absolute 같은 방법을 적용해서 그런 어려움을 타파할 수도 있긴 있다.

그냥, image 가 scroll 의 밖에 있으면 됨.

예를 들면,

<div style="width:100px; height:200px; overflow:hidden;">
<div style="width:100px; height:200px; overflow:scroll;">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>
<img style="position:relative; left:0px; top:-200px;" />
</div>

요렇게...

단지, 원래 위치가 overflow:hidden 의 표시공간 밖에 있는
그림(?)에 대해
딱히 책임질 수 있을만한 소지가 없고
 
사진 위에서는 스크롤을 받지 않기 때문에...

...

smallLet killofki@.

ps... 음... 글자확대 project 는 아직 보류중 OTL...