css로 무한히 흐르는 텍스트 만들기 + 가상요소선택자로 만들기

같은 내용의 텍스트를 두 줄 나란히 배치하여 무한히 반복되어 흐르는 것 처럼 보이도록 할 수 있습니다.

 

 

 

    <div class="letter">
      <p>blu shak blu shak blu shak blu shak&nbsp</p>
      <p>blu shak blu shak blu shak blu shak&nbsp</p>
    </div>

우선 같은 내용의 텍스트를 p에 담습니다.

.letter {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  font-size: 100px;
  white-space: nowrap;
  text-transform: uppercase;
  animation: streamLetters 8s infinite linear;
}

display: flex; 로 두 개의 p를 일렬로 만듭니다.

white-space: nowrap; 로 화면의 너비에 따른 text 줄바꿈이 되지 않도록 합니다.

 

다음으로 애니메이션을 적용합니다. 

@keyframes streamLetters {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

원리는 간단합니다.

같은 내용을 담은 p를 한 줄로 이어붙였기 때문에, 두 개의 p를 갖고 있는 .letter div의 너비는 p의 2배가 됩니다.

 

따라서 translateX 를 -50% 이동하도록 하면

정확하게 첫 번째 줄의 p 까지만 x (-50%)좌표로 이동하고,

애니메이션이 끝나면 x (0)좌표로 되돌아갑니다.

제자리로 돌아가는 모습이 보이지 않을 정도로 두 문장의 길이가 충분히 길다면 무한히 반복되는 것 처럼 보입니다.

---

하지만 웹 접근성 면에 있어서 이 텍스트 박스가 필요하지 않다고 생각한다면 가상요소 선택자로도 만들 수 있습니다.

tag를 대신하여 가상요소 선택자 before, after로 텍스트를 만들어 줍니다.

.mainTxt::before,
.mainTxt::after {
    content: "Blu Shaak Blu Shaak Blu Shaak Blu Shaak";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 100px;
    font-weight: 900;
    color: #f9f9f9;
    white-space: nowrap;
    animation: move 20s infinite linear;
}

 

 

그리고 before의 위치와 겹치게 한 뒤, after의 컨텐츠를 translateX로 100%만큼 이동시키면 한 줄로 나열된 것 처럼 보이게 됩니다. 

그리고 before와 after를 함께 움직이게 만들면 위에서 한 방식과 똑같이 텍스트가 반복되며 무한히 흐르는 것 처럼 보이게 됩니다.

.mainTxt::after {
    animation: move2 20s infinite linear;
}

@keyframes move {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes move2 {
    from {
        transform: translateX(100%) translate3d(0, 0, 0);
    }
    to {
        transform: translateX(100%) translate3d(100, 0, 0);
    }
}