DOM 스크립트: 이미지, 텍스트 스크롤러

scrollObj는 자바스크립트의 문서 객체 모델(DOM)을 이용해서 이미지나 텍스트에 스크롤 효과를 주는 오브젝트(객체)입니다. 비슷한 효과를 내는 함수나 오브젝트들이 자바스크립트 상의 소스를 document.write 메소드로 화면상에 출력하는 것과 달리 HTML 소스를 그대로 이용하므로 자바스크립트를 사용할 수 없는 환경에서도 스크롤될 내용을 확인할 수 있고, 문서의 소스도 간단해지는 장점을 갖습니다.

그러면 scrollObj의 세부적인 사항에 대해서 하나씩 설명하도록 하겠습니다.

W3C웹 컨텐츠 접근성 지침(Web Content Accessibility Guidelines) 1.0 가이드라인 7은 화면 깜빡임을 유발하는 컨텐츠 스크롤을 사용하지 않도록 권고하고 있습니다. 가능하다면 기획이나 디자인 단계에서 아예 스크롤 효과를 배제시키는 것이 최선의 방법이라 생각합니다.

동작 원리

scrollObj는 이미지나 텍스트가 들어 있는 리스트(ul, ol)의 절대 위치(absolute position) 값을 바꾸는 것으로 스크롤 효과를 만듭니다. 즉, 리스트 요소 자체를 이동시키는 것이지요. 그러면서 리스트에 포함된 특정한 항목 요소(li)를 기준으로 하는 이동 거리를 계산합니다. 이 특정 요소의 너비(또는 높이)와 이동 거리가 같아질 때 리스트 항목의 순서를 바꾸어서 스크롤이 계속 이어지도록 하는 것이지요. 설명을 위해 간단한 예제를 만들어봤습니다.

  • 11111
  • 22222222222
  • 3333
  • 444444444444444

scrollObj 선언과 함게 먼저 리스트 요소의 순서가 바뀝니다. 예제에서 리스트의 마지막 요소였던 “444444444444444” 항목이 첫 번째 요소가 된 것처럼이요. 이 과정에서 앞으로 옮겨진 요소들의 너비(또는 높이)만큼 리스트의 절대 위치가 이동됩니다. 따라서 실제로는 리스트의 첫 번째 항목이 “11111” 요소인 것처럼 보이게 되지요.

“시작/정지” 버튼을 누르면 스크롤이 시작됩니다. “방향 전환” 버튼으로 스크롤 방향을 바꿀 수도 있고요. 리스트를 감싸는 divoverflow: hidden; 속성을 주지 않았기 때문에 실제 요소의 이동을 눈으로 확인할 수 있습니다.

앞서 리스트의 순서가 바뀌는 시점을 특정 요소의 크기만큼 위치가 이동했을 때라고 했는데, 스크롤 방향에 따라서 기준이 되는 요소가 다르다는 점에 주의해야 합니다. 위 예제에서 일반적인 좌측 이동일 경우에는 리스트의 두 번째 요소가 기준이고, 오른쪽으로 이동할 때에는 첫 번째 요소가 기준이 되거든요. 이렇게 기준 요소를 달리 정한 것은 리스트 순서가 바뀔 때 정지 효과를 넣기 위해서입니다.

scrollObj 사용법

scrollObj는 오브젝트만 선언하면 자동으로 스크롤이 시작됩니다. 추가적인 전역 변수 선언은 필요하지 않고요. 선언 시 지정할 수 있는 인수는 많지만 대부분 생략 가능합니다. 먼저 scrollObj가 어떻게 선언되어야 하는지 실제 자바스크립트 소스를 적어보겠습니다.

var scrollObj = function(targetEle, isVertical, sumMargin, movePx, startNum, interval, isInverse, stopDuration)

여덟 개의 인수들 중에서 필수적인 항목은 스크롤 효과를 적용할 리스트의 id 값을 의미하는 첫 번째 targetEle 뿐입니다.

so1 = new scrollObj("scrollTest");

위 예처럼 리스트 id만 넣어주면 기본 설정으로 스크롤이 시작되니까요. 그러면 생략 가능한 나머지 인수들의 역할과 기본값을 알아볼까요?

인수명 가능한 값 기본값 역할 변경 가능 여부
isVertical true 또는 false false 수직 스크롤 여부 선언 후 변경 불가
sumMargin 숫자값 0 리스트 항목의 마진값 선언 후 변경 불가
movePx 숫자값 1 스크롤 거리(px) 선언 후 변경 불가
startNum 숫자값 2 추후 설명 선언 후 변경 불가
interval 숫자값 25 스크롤 간격(ms) 선언 후 변경 가능
isInverse true 또는 false false 역방향 스크롤 여부 선언 후 변경 가능
stopDuration 숫자값 0 요소 변경시 멈출 시간(ms) 선언 후 변경 가능

오브젝트 선언 후에도 변경이 가능한 interval, isInverse, stopDuration 변수는 아래 예처럼 사용됩니다.

so1 = new scrollObj("scrollTest"); so1.isInterval = 50; so1.isInverse = true; so1.stopDuration = 1000;

하지만 이렇게 자유롭게 변경할 수 없는 인수들은 오브젝트 선언시 그 값을 정확히 지정해야 합니다. 예를 들어서 스크롤 거리를 2px로 지정하려면 다음과 같이 오브젝트가 선언되어야 합니다.

so1 = new scrollObj("scrollTest", false, 0, 2);

주의 사항

리스트 항목 요소들 사이에 마진(margin) 값이 존재할 경우에는 오브젝트 선언 시 이동 방향의 양쪽 마진을 합한 값을 sumMargin 인수에 넣어주여야 합니다. 만약 isVerticaltrue이고(수직 스크롤) margin이 있을 경우에는 마진이 합쳐지는 현상(collapsing-margins)도 고려해야 합니다. 예를 들어서 아래와 같은 스타일이 적용될 경우에 sumMargin 값은 20이 아니라 10이 되어야 합니다.

 #scrollTest li { margin: 10px 0; }

오브젝트 선언 시 사용되는 startNum 인수는 실제 보여질 화면 영역 왼쪽에 존재할 리스트 항목 요소의 수를 결정합니다. 예를 들어서 startNum이 기본값인 2라면 앞서 들었던 예처럼 리스트의 첫 번째 요소(“11111”)가 실제로는 두 번째 요소로 바뀐 상태에서 스크롤이 시작됩니다. 이 부분은 특히 역방향 스크롤에서 리스트 요소의 수가 적고 각각의 항목들 크기가 많이 차이날 때 중요한 역할을 합니다. 가급적이면 리스트 항목 요소들의 수를 충분히 확보한 상태에서 스크롤 효과를 주는 것이 좋습니다.

적용 예

scrollObj 데모 페이지에서 실제로 적용된 예를 보실 수 있습니다. 페이지 중앙에 있는 수평 텍스트 스크롤, 우측의 수직 텍스트 스크롤, 하단의 수평 이미지 스크롤이 모두 scrollObj로 구현되었습니다.

다운로드

아래 링크를 클릭하면 js 확장자를 가진 파일을 받으실 수 있습니다.

자바스크립트 스크롤러 다운로드 [4.66kB]

마치며

기존에 포스팅한 DOM 스크립트: 이미지 스크롤러를 다양한 용도로 사용할 수 있도록 수정하면서 내용이 많이 바뀌었습니다. 가장 큰 변화로는 기존 함수 기반의 소스를 오브젝트 기반으로 바꾼 것인데 그렇게 해서 전역 변수를 추가적으로 선언해야 하는 불편함을 없앴습니다. 범용성도 높이고요.

기존 소스에 비해서 오류 처리 부분이라든가 주석 처리가 많이 나아졌지만 충분한 테스트를 거치지 않았기 때문에 알 수 없는 문제가 있을 수도 있습니다. 혹시 이런 문제를 발견하시면 꼭 알려주세요.

댓글 1개가 달렸습니다. 태그: , , ,

  1. 용호 | 2009-04-20 21:27

    스크롤되는 스크립트 가지러 들어왔어요. ㅎㅎ 오래전에 만든소스인데도 이게 젤루 맘에 드네요. 이것도 슬쩍 같다 쓸께요.. 물론 출처는 밝혀야죠.. 고개젖히는 3단웃음 보여 주러 한번 놀러오세요…~!

댓글이 닫혔습니다.