[아임웹 코드] 텍스트 무한 반복 슬라이드 애니메이션

애니메이션 시연 동영상 보기

<div class="txtanimation">

<div id="slider">

  <div class="span">아임웹 코드</div>

  <div class="span" id="sliderValue"></div>

</div>

</div>

<style>

  .txtanimation {

  font-family: 'Ubuntu', sans-serif;

  margin: 0 auto;

  background-color: #191a1e;

  color: white;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

}

#slider {

  width: 800px;

  display: flex;

  gap: 15px;

  font-size: 30px;

}

#sliderValue {

  display: flex;

  color: #0077ee;

    font-weight: 700;

}

.start {

  opacity: 0;

}

.animation {

  animation: fade .3s forwards;

}

@keyframes fade {

  0%{

    opacity: 0;

    transform: translateY(20px);

  }

  100%{

    opacity: 1;

    transform: translateY(0px);

  }

}

.holder-animation {

  animation: holder 4s;

}

@keyframes holder {

  0%{

    opacity: 1;

  }

  95%{

    opacity: 1;

  }

  100%{

    opacity: 0;

  }

}

</style>

<script>

  var sliderCounter = 0;

var sliderContent = [

  "텍스트 애니메이션",

  "하단 고정형 입력폼",

  "갤러리 애니메이션",

  "게시판 검색창",

  "더 많은 코드는 맵핑 홈페이지에서"

];

var slider = document.querySelector("#slider");

var sliderValue = document.querySelector("#sliderValue");

function slide() {

  if (sliderCounter &gt= sliderContent.length) {

    sliderCounter = 0;

  }

  sliderValue = "";

  sliderValue.classList.remove("holder-animation");

  void sliderValue.offsetWidth;

  sliderValue.classList.add("holder-animation");

  for (i = 0; i < sliderContent[sliderCounter].length; i++) {

    let letterDiv = document.createElement("div");

    letterDiv = sliderContent[sliderCounter][i];

    if (letterDiv == " ") {

      letterDiv = "&nbsp;";

    }

    letterDiv.classList.add("start");

    letterDiv.classList.add("animation");

    letterDiv.style.animationDelay = i / 10 + "s";

    sliderValue.appendChild(letterDiv);

  }

  sliderCounter++;

}

slide();

setInterval(slide, 4000);

</script>