[CSS] 흐르는 텍스트 구현하기

1. html에서 흐르는 텍스트를 구현할 부분 설정

 

글씨가 잘 보이지 않는 세군데에다가 다음의 코드를 추가해준다.

<div class="flow-text">
	<div class="flow-wrap"></div>
</div>

 

 

 

 

예를 들면 내 코드는 다음과 같다.

<div class="flow-text">
	<div class="flow-wrap">
		<div class="choreo-info"><div class="prowdmon-color">PROWDMON</div>&npar; HYEILY</div>
	</div>
</div>

 

2. CSS 정의

원하는 곳에 class를 설정해주었다면,

해당 class를 각각 CSS애서 정의 해주어야 한다.

 

내가 원하는 것은

 

1. 넘치는 글자들 움직이도록 만들기

2. 마우스를 올렸을 때 색깔이 변함과 동시에 움직임 잠시(마우스가 올라가 있는 동안) 멈추기

 

 

 

flow-text 

.flow-text {
    display: flex;
    /* 텍스트를 가로로 나열하기 위해서 */
    
    flex: 0 0 auto;
    /* 화면이 줄어들었을때 항목들의 사이즈가 줄어들지 않게 하기위해 */ 
    
    white-space: nowrap;
    /* 텍스트가 가로로 나열되면서 밑으로 떨어지는 것을 막기위해 */
    
    overflow: hidden;
    /* 밖으로 넘치는 텍스트 때문에 가로스크롤 생기는 것을 막기위해 */
    
    transition: 0.3s;
    font-size: 1.4rem;
    font-weight:bold;
}

 

 

flow-text:hover 

.flow-text:hover {
    color: #fff;
}

 

.flow-text:hover .flow-wrap {
    animation-play-state: paused;
    cursor: pointer;
}

 

 

flow-wrap 

.flow-wrap {
    animation: textLoop 10s linear infinite;
    padding-right: 1.4881vw;
}

 

 

textLoop로 움직임 설정하기

@keyframes textLoop {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
}

 

 

 

 

 

🌟POINT🌟

 

1. -webkit-transform 

 

 

 

 

결과🚀

 

문제점💣

잘린 단어가 나타나지 않고 그대로 움직인다.

단어가 12개까지만 표현되고 나머지 뒤에 단어는 잘린다.