[HTML & CSS] 가로로 흐르는 텍스트 만들기

 

쇼핑몰, 사이트 내 가로로 흐르는 전광판 텍스트 만들기

 

 

최근 트렌디한 웹사이트에서 볼 수 있는 가로로 흐르는
전광판의 역할을 하는 텍스트를 CSS 만으로 만들 수 있는 방법을 소개해드립니다.

 

<style>
/* 움직이는 텍스트 */
.animated-title {font-size:60px; font-family:'Raleway',Sans-serif; font-weight:300; position: relative; width: 100%;max-width:100%; height: auto; padding:100px 0; overflow-x: hidden; overflow-y: hidden; }
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px){
.animated-title .content {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem));}
    }
</style>


<div class="animated-title">
  <div class="track">
    <div class="content">&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad</div>
  </div>
</div>

 

아래에서 예제를 확인해보세요.

 moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad

 

 

텍스트가 삽입된 사이트의 예시입니다.

적용된 사이트 확인하기

 

 

이 글이 도움되셨다면 댓글과 공감으로 응원해주세요 🥳
궁금하신 점은 댓글 남겨주세요.