글자에니메이션 - 마퀴(MARQUEE)

MARQUEE라는 태그를 이용하여 글자들을 애니메이션 시켜 볼수있답니다.

간단한 html 만으로 텍스트에 가벼운 움직임을 줄수 있습니다.

 

 

- 오른쪽에서 왼쪽으로 글씨가 쭈욱 지나가요...

<marquee>글자가 지나가요</marquee>

 

- width=600 값을주어 가로 600픽셀 내에서만 움직여요.height 나 퍼센트로 줄수도 있어요.

<marquee width=600>영역을 지정해주어요</marquee>

 

- behavior=alternate 라는 값을 주어 글자가 좌우로 왔따갔다 해요.

<marquee width=600 behavior=alternate>좌우로 움직여요</marquee>

 

- behavior=slide 라는 값을주어 오른쪽에서 왼쪽으로 한번만 오구 정지되요.

<marquee width=600 behavior=slide>글자가 멈춰요</marquee>

 

- direction=left/right/up/down 라는 값을 이용해 움직이는 방향을 지정해주어요.

<marquee width=600 direction=right>오른쪽으로 움직여요</marquee>

 : direction=up/down 을 적용시킬땐 height=100 정도의 세로값도 적용시켜 주세요~

 

-scrolldelay=1000 이라는 값을 주어 1초동안 멈췄다 지나가요... 계속....

<marquee width=600 scrolldelay=1000>글자가 멈췄다 다시 지나가요</marquee>

 : scrolldelay=1000 이 1초구요. 값을 많이 주면.. 점프하는것처럼 보여요..

 

-scrollamount 값을 변경시키며 속도를 지정해주어요.

<marquee width=600 scrollamount=50>글이 빨리지나가요</marquee>

 

 

이외에loop 를 이용해서 마퀴의 횟수를 지정해줄수 있어요..

기본 무한정 반복이니까.. loop=10 이라고 추가해주면 열번만 지나가면 사라져요.

bgcolor을 이용해서 글자가 지나가는 영역부분에 바탕색을 넣어줄수도 있어요.

 

 

 

 

*현재 테스트는 한줄 텍스트였지만...

실제에서 사용할땐 몇줄의 텍스트를 사용하는 경우가 많습니다.

그런 경우.. 글자가 위로 막~~ 지나가다가 놓치는 경우가 있겠죠..?

 

그럴때 읽는 사람의 편의를 위해올라가던 텍스트에 마우스를 올리면... 마퀴가 멈춥니다.마우스를 치우면.. 다시 움직이기 시작하게 하는 소스입니다.

 

 

onmouseover=stop() onmouseout=start()

 

marquee 소스안에 추가해주세요~

단. 이 소스는 자바스크립트이기때문에 html 소스만 적용되는 창말고..

자바스크립트도 적용이 가능한곳에서만 가능해요~ 대부분이 가능하죠~^^;;

 

 

 

 

* 모든 사항은 html 태그가 사용되는곳에서 테스트 해보시면 금방 차이를 알수가 있답니다.^^*