타이핑 효과 랜딩 페이지

조금 특별한 랜딩 페이지를 만들어 보고 싶어 제작하게 되었다.
CSS공부를 하던 중 알게 된 수코딩님의 강좌를 보고 만들게 되었는데 생각지도 못한 방식으로 만들어지게 되어 신기하기도 하고 꼭 기억하고 싶어 적게 되었다.

CSS 효과

#dynamic {
  position: relative;
  display: inline-block;
}

#dynamic::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -10px;
  width: 4px;
  height: 100%;
  background-color: white;
}

#dynamic.active::after {
  display: none;
}

#dynamic에 display : inline-block이 들어간 이유는 P태그로 만들어지다 보니 커서의 위치가 p태그의 영역만큼 따라가기에 글자 수가 짧아지거나 너무 길어지면 커서의 위치가 적절하지 않아 위와 같은 방식을 주게 되었다.

JS

let target = document.querySelector("#dynamic");

function randomString() {
  let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to Javascript"];
  let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
  // Math.floor를 넣어 소수점으로 나오던 숫자를 3을 넘지 않는 랜덤한 숫자가 나오게 됨
  let selectStringArr = selectString.split("");

  return selectStringArr;
}

// 타이핑 리셋
function resetTyping() {
  target.textContent = "";
  dynamic(randomString());
}

//한글자씩 텍스트 출력 함수
function dynamic(randomArr) {
  if (randomArr.length > 0) {
    target.textContent += randomArr.shift();
    setTimeout(function () {
      dynamic(randomArr);
    }, 80);
  } else {
    setTimeout(resetTyping, 3000);
  }
}
dynamic(randomString());

//커서 깜빡임 효과
function blink() {
  target.classList.toggle("active");
}
setInterval(blink, 500);

배열로 출력하고자 하는 값들을 넣고 Math.random()을 이용하여 랜덤한 형식으로 만들어지게 되는데 이때 소수점으로 나오기에 Math.floor를 사용하여 소수점으로 나오던 숫자를 일반값으로 반환하게 하는 형식으로 만들었다.