[해피CGI][cgimall] 다수 영역을 동시에 스크롤하는 Syncscroll

 

3가지 스크롤 영역을 스크롤만 이용하여 동시에 열람할 수 있습니다.

동시에 스크롤 하고자 하는 div 영역에 아래와 같이 class 와 name 을 동일하게 적용하여 이용가능합니다.

<div class="syncscroll frame goethe" name=goethe>

 

 

2가지 비교되는 이미지 영역으로 "드래그" 를 이용한 스크롤이 가능합니다.

이용방법은 위 스크롤 소스와 동일하나 class 명칭이 다릅니다.

<div class="syncscroll dragscroll frame earth left" name=earth>

 

두가지 스크롤 창이 동시에 스크롤 되나 스크롤 크기 및 스크롤 타임이 다르게 설정하여 비교합니다.

연혁이나 시간차를 두고 비교해야할 대상에게 유용합니다.


<div class="mid syncscroll dragscroll frame time romanian" name=timeline>
      <img src="http://asvd.github.io/syncscroll/romanian_timeline.png"/>
</div>

<div class="mid syncscroll dragscroll frame time floss" name=timeline>
      <img src="http://asvd.github.io/syncscroll/floss_timeline.png"/>
</div>

위와같이 name 값 영역의 타임라인 및 class 명칭을 다르게 주어 제어할 수 있습니다.