[miniProjects] 30_Auto Text Effect

30_Auto Text Effect

💻주제 : 자동 타이핑 효과 (속도조절도 가능)

const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = "We Love Programming"
let idx = 1
let speed = 300 / speedEl.value

writeText()

function writeText() {
  textEl.innerText = text.slice(0, idx)

  idx++

  if(idx > text.length) {
    idx = 1
  }
  setTimeout(writeText, speed)
}

speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

• let speed = 300 / speedEl.value
  애니메이션 속도를 나타내는 변수 speed를 선언하고, speedEl 요소의 값에 따라 초기화한다. speedEl은 input 요소로 사용자가 속도를 선택할 수 있는 요소다.
• writeText()
  텍스트를 한 글자씩 출력하는 애니메이션을 구현하는 함수
• textEl.innerText = text.slice(0, idx)
  textEl 요소의 innerText 속성을 사용하여 현재까지 출력된 텍스트를 설정한다.
  text.slice(0, idx)는 text 변수에서 0부터 idx 직전까지의 부분 문자열을 가져온다.
  idx++: idx 값을 1 증가시킨다.
• if(idx > text.length) { idx = 1 }
  idx 값이 text의 길이보다 크면 idx를 1로 재설정한다. -> 텍스트가 한 바퀴를 돌면서 반복되게 된다.
• setTimeout(writeText, speed)
  writeText 함수를 speed 밀리초 후에 호출한다. 이렇게 함으로써 텍스트가 한 글자씩 출력되는 속도를 제어할 수 있다.
• speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)
  speedEl 요소에 'input' 이벤트 리스너를 추가한다. 사용자가 속도를 선택할 때마다 호출되는 콜백 함수에서 speed 값을 갱신한다.
  300 / e.target.value는 사용자가 선택한 속도에 따라 애니메이션 속도를 조정하기 위한 계산식