[css] 슬라이딩 텍스트 캐러셀(css only)

사이트를 개발하는데 있어 생뚱 맞은 게 왔다.

무려 keyframe을 통한 애니메이션 구동...

 

이게 내가 만드려고 해보니 너무 어려웠다.

왜냐하면 x축 이동만 있는 게 아니라 y축도 이동시키면서 이동시 모습은 해당 부분이 보이지 않아야 하므로

그래서 기본 코드에서 기존 3개에서 4개로 밀어넣는 부분을 고쳤고,

해당 넓이를 찾기위해서 message 태그 위치에서

개발자 도구로 top, width를 넣어가며 해당 태그의 길이와 위치를 일일히 찾아야만 했다.

그리고 overflow hidden, animation css를 꺼둔 상태로. 해야 이동되지 않음.

 

code epen에서 위치랑 실제 구동 되는 위치가 달라서 원본 소스코드로는 -3, -6, -9, -12.5em으로 잡야한다.

좀 많이 어려웠지만 animation css 학습하는데 아주 좋진 않고 힘들었다..

 

 top의 위치가 살짝 아래로 가 있는데, 이는 기본 top을 0으로 조정해주면 된다.

<h1>
  <span>Good Man is </span>
  <div class="message">
    <div class="word1">23 years old</div>
    <div class="word2">Developer</div>
    <div class="word3">sports man</div>
    <div class="word4">driving a car</div>
  </div>
</h1>

 

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  color: #333;
    font-family: tahoma;
    font-size: 16px;
    font-weight: 30;
    line-height: 118%;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

h1 span {
  font-size: 16
    px;
}

.message {
  background-color: rgba(25, 224, 167, 0.2);
    color: #333;
    display: block;
    font-weight: 900;
    overflow: hidden;
    position: absolute;
    margin-left: 0.2rem;
    top: 0rem;
    left: 2.5em;
    animation: openclose 7s ease-in-out infinite;
}

.word1, .word2, .word3 {
  font-family: tahoma;
}

@keyframes openclose {
    0% {
      top: 0rem;
      width: 0;
    }
    5% {
      width: 0;
    }
    15% {
      width: 168px;
    }
    25% {
      top: 0rem;
      width: 168px;
    }
    28% {
      top: 0rem;
      width: 0;
    }
    30% {
      top: 0rem;
      width: 0;
    }
    33% {
      top: -1.2rem;
      
    }
    38% {
      top: -1.2rem;
      width: 190px;
    }
    48% {
      top: -1.2rem;
      width: 190px;
    }
    58% {
      top: -1.2rem;
      width: 0;
      text-indent: 0;
    }
    
    61% {
      top: -2.4rem;
    }
    64% {
      top: -2.4rem;
      width: 168px;
    }
    67% {
      top: -2.4rem;
      width: 168px;
    }
    77% {
      top: -2.4rem;
      width: 0;
      text-indent: 0;
    }
    79% {
      top: -3.6rem;
      width: 0;
      text-indent: 5px;
    }
    86% {
      top: -3.6rem;
      width: 168px;
    }
    95% {
      top: -3.6rem;
      width: 168px;
    }
    98% {
      top: -3.6rem;
      width: 0;
      text-indent: 5px;
    }
    100% {
      top: 0;
      width: 0;
      text-indent: 0;
    }
}

- 원본 코드 출처 -

https://alvarotrigo.com/blog/css-text-animations/

15 Gorgeous CSS Text Animation Effects [Examples]

해당 코드 epen

https://codepen.io/alvarotrigo/pen/PoKMyWE

Text animation effect