흐르는 글자 css == marquee css 보완 버전

<marquee>는 곧 없어진다.

이에 css로 marquee를 표현한 게시글이 많다.

아쉽게도 예전만큼 인기가 높지 않아, 다들 적당히 만든 것 같아 필자가 약간 보완해 보았다.

대부분의 marquee css에서는 마우스 온 스탑을 구현하지 않았다.

See the Pen Marquee CSS by nanati (@nanati) on CodePen.

marquee를 충실하게 구현하였지만, 배경 색깔이 탁하다는 것과 width가 600px로 제한되었다는 것에 한계를 가진다. 이에 이 것을 그대로 사용하기에는 반응형 웹페이지에서는 다소 무리가 있어 보인다..

이를 해결하기 위해서는 배경 색깔을 없애거나 투명 코드로 대체해야 하고 width를 수정해야 꽉 찬marquee를 표현할 수 있다. 하지만 여기서 멈추면 안 된다. 이대로 적용하면 다시 글자가 지나갈 타이밍에 부드럽게 들어오는 것이 아니라 갑자기 글자가 나타나는 현상이 발생한다. 이는 right padding값을 수정돼야 한다는 것을 말해준다.

이 모든 것을 수정한다면,,

See the Pen marquee css1 by xelaw (@xelaw) on CodePen.

이렇게 결과물이 나온다.

갑자기 빨라졌네요. 그리고 마우스를 위에 둬도 멈추지 않아요.

그것이 이 코드의 맹점이다. 우리는 이에 css에서 사용하는 :hover기능을 사용해야 한다.

See the Pen marquee css2 by xelaw (@xelaw) on CodePen.

출처 : https://www.quackit.com/css/codes/marquees/how_to_pause_a_marquee_on_hover.cfm

이 코드는 이전 코드와 달리 마우스를 올리면 충실하게 멈춰준다. 헤이 웨이터~

이전 코드보다 간단하고 구현하기에도 용이해 보인다. 하지만 당연히 맹점이 하나 있다.

바로 적용한 페이지의 width만큼만 글자를 표현한다는 것이다.

즉, 페이지 넓이 이상의 글자나 그림을 삽입하게 되면 잘리고 딱 넓이만큼만 표현된다는 의미다.

그렇다면 어떡해야 할까?

이 코드에서 멈출 수 있었던 힘은 바로, 이 코드다.

.example1 h3:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

이 코드를 바로 처음 코드에 적용시키면 된다.

물론 자세히 관찰하면 첫 번째 코드와 세 번째 코드가 다른 점이 있는데 바로 display:inline-block;;이다. 이 구문을 세 번째 코드에 적용시키면 화면 페이지에 오버된 글자도 이상 없이 표현된다. 하지만 marquee 코드는 오버 된 글자가 다 지나가기 전에 사라져 다시 처음 행동을 반복하게 된다. 이에 대해서는 padding을 적용 해 조절할 수 있지만, 일단은 첫 번째 코드를 고쳐 쓰기로 하자.

그럼 이제 모든 것이 다 해결되었는가?? 아니다.

See the Pen pmEQmO by 제성현 (@xelaw) on CodePen.

처음 코드의 한계는 -ms-animation-duration:10s;이다. 즉, 특정 시간 안에 marquee를 끝내야 하니 화면이 가로로 길거나, 안에 적용되는 글자가 지나치게 길 경우 빠른 속도로 지나가게 된다. 이에 임시로 시간을 30s로 맞추면 되나 화면에 따라 내용물에 따라 속도가 달라진다. 는 한계점은 여전히 가지고 있다. 이래서 처음 작성자가 width를 특정 길이로 제한한 것이다.