| 일부화면 scroll 하기 | Go to dhtml 예제 |
버젼 4에서는 레이어나 CSS-P로 이와 같은 다양한 방법으로 이런 효과를 볼 수 있습니다. 바로 레이어의 좌표이동과 clip으로 이런 효과를 낼 수 있습니다.
한개의 레이어 속에 다른 레이어를 넣고 상위의 레이어에게 clip으로 보이는 만큼의 면적을 clip합니다. 그리고 하위의 레이어를 위나 아래로 이동시키면 일정한 부분에서 이동하는 효과가 납니다.
두 개의 레이어로 이런 효과를 낼려면 둘 다 이동을 시켜야 하므로 좀 번거럽고 소스도 길어 집니다. 그리고 처리 속도도 별로 만족스럽지 못합니다.
반복해서 scroll 효과를 내기 위해서는 하위의 scroll할 레이어의 폭이나 넓이를 알아야 하는데, 이미지 같은 경우는 정확히 그 크기를 알 수 있지만, 일반 문자를 사용한다면 OS, 사용자 브라우저의 글자 크기설정에 따라서 그 크기가 일정하지 않습니다. 이 레이어가 가지고 있는 내용물의 폭과 넓이를 나타내는 nn4의 document.height, document.width 와 ie4의 offsetHeight, offsetWidth를 사용합니다. 이들 property를 사용하여 정확한 제어가 가능합니다.
<style>
#sh { position:absolute; width:200; height:100; clip:rect(0,200,100,0); }
#sc { position:absolute; width:200; padding:5; }
</style>
화면의 크기로 사용할 상위의 레이어에게 clip:rect(0,200,100,0) 를 지정했습니다. 가로 200px, 세로 100px의
크기로 화면을 보여줍니다. 하위의 레이어 sc는 좌표가 없습니다. 좌표를 지정하지 않으면 기본으로 0이 지정됩니다.
상위와 하위에 같은 좌표값을 지정했습니다. 상위에 대하여 꽉차는 화면으로 scroll하기 위해서 입니다.
sc 레이어의 padding:5; 는 하위 레이어가 가지고 있는 내용물을 4면 모두에서 5px만큼 들여쓴다는 설정입니다.
넣어주지 않아도 상관없습니다.
<div id=sh> <div id=sc> 안녕하세요. 만나서 반갑습니다. <p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. <p> 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. <p> 안녕하세요. 만나서 반갑습니다. </div> </div>상위 레이어에 이동시킬 레이어 sc를 넣어 줬습니다. sc의 내용물은 원하는 만큼 넣어주면 됩니다. nn4의 document.height, document.width 와 ie4의 offsetHeight, offsetWidth 가 내용물의 크기를 알려주니까요.
function init() {
if (n4) X = document.sh.document.sc
else if (e4) X = document.all.sc
scrollGo()
}
</script>
</head>
<body onLoad="init()">
이동시킬 레이어 sc를 setTimeout()로 제어하기 위해서 외부변수에 저장합니다.
그리고, 이동시킬 함수 scrollGo()를 실행합니다.
function scrollGo() {
if (n4) {
if ( X.top > (X.document.height * -1) ) {
X.top += -1
setTimeout("scrollGo()", 50);
}
else {
X.top=90;
scrollGo();
}
}
else if (e4) {
if ( X.style.pixelTop > (X.offsetHeight * -1) ) {
X.style.pixelTop += -1
setTimeout("scrollGo()", 50);
}
else {
X.style.pixelTop=90;
scrollGo();
}
}
}
X.top, X.style.pixelTop은 이동할 하위 레이어 sc의 상위 레이어 안에서의 수직 좌표입니다.
X.document.height, X.offsetHeight는 하위 레이어 sc의 폭입니다. 여기서는 위로 이동시킬 것이므로
이들을 사용합니다. 하위 레이어의 폭과 수직 좌표값을 비교하여 하위 레이어의 일부가 아직 상위
레이어의 clip 구역 내에 있다면 계속 위로 이동하고 구역을 벗어나면 다시 반복해서 이동효과를 내기위해
수직좌표값을 초기화합니다. 그래서 반복해서 수행합니다.
전체 소스입니다.
<style>
#sh { position:absolute; width:200; height:100; clip:rect(0,200,100,0); }
#sc { position:absolute; width:200; padding:5; }
</style>
<script>
n4=(document.layers)?1:0;
e4=(document.all)?1:0;
function scrollGo() {
if (n4) {
if ( X.top > (X.document.height * -1) ) {
X.top += -1
setTimeout("scrollGo()", 50);
}
else {
X.top=90;
scrollGo();
}
}
else if (e4) {
if ( X.style.pixelTop > (X.offsetHeight * -1) ) {
X.style.pixelTop += -1
setTimeout("scrollGo()", 50);
}
else {
X.style.pixelTop=90;
scrollGo();
}
}
}
function init() {
if (n4) X = document.sh.document.sc
else if (e4) X = document.all.sc
scrollGo()
}
</script>
</head>
<body bgcolor="cecebd" onLoad="init()">
<div id=sh>
<div id=sc>
안녕하세요. 만나서 반갑습니다. <p>
안녕하세요. 만나서 반갑습니다.
안녕하세요. 만나서 반갑습니다. <p>
안녕하세요. 만나서 반갑습니다.
안녕하세요. 만나서 반갑습니다. <p>
안녕하세요. 만나서 반갑습니다.
</div>
</div>