예전에 작성했던 글자 적고 지우는 스크립트를 타이틀에 사용하는 방법입니다.

예전엔 무조건 글자를 적고 지우는 기능만 넣어뒀는데, 이번엔 글자를 단순히 적기만 하고 끝나는 기능과 지우는 애니메이션은 생략하고 적기만 하는 애니메이션 두 가지를 추가했습니다.

또한, Array뿐 아니라 String도 사용할 수 있도록 업데이트했습니다.

function typeTitle(titleanimationspeed) {
  const isString = typeof(title=== "string";
  let i = 0j = 0;
  speed === undefined && (
    speed = 500
  ),

  function txtnum() {
    j == textArray.length - 1
    ? j = 0
    : j++
  }

  function type() {
    const max = isString ? title.length : title[j].length;
    i <= max
    ? (
      document.title = `\u200E${(isString ? title : title[j]).slice(0i)}`,
      i++,
      setTimeout(typespeed)
    )
    : (
      isString && (
        animation.indexOf("type-"=== -1
        ? remove()
        : (
          animation === "type-once" || (
            setTimeout(() => {
              document.title = "\u200E",
              i = 0,
              type()
            }, +animation.replace("type-"""))
          )
        )
      )
    )
  }

  function remove() {
    0 < i
    ? (
      document.title = document.title.slice(0i),
      i--,
      0 == i && (document.title = "\u200E"),
      setTimeout(removespeed)
    )
    : (
      isString || txtnum(),
      type()
    )
  }

  document.title = "\u200E",
  type();
}

title 태그가 텅 비어있으면 주소를 표시하기 때문에, u200E라는 아무것도 표시되지 않는 유니코드를 집어넣었습니다.

typeTitle("title")
typeTitle(["first""second""third"])

타이틀을 집어넣어 함수를 호출만 해도 애니메이션이 적용됩니다.
String, Array 두 가지만 사용하셔야 오류가 없습니다.

typeTitle("title""type-once")
typeTitle("title""type-500")

세 가지 애니메이션이 있습니다.

기본 : 한 글자씩 적고 한 글자씩 지웁니다.
type-once : 한 글자씩 적고 작동을 멈춥니다.
type-(숫자) : 한 글자씩 적고, (숫자)밀리초 이후에 글자를 모두 지우고 한 글자씩 적습니다.

typeTitle("title"""500)

글자를 적는 시간을 조절하실 수 있습니다.
과하게 빠르게 설정하면 두세 글자씩 적히는지라 적당한 속도를 유지해주시는 게 중요합니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  • Kiss Me ♥

    댓글에 적으신 것처럼 참 이쁜 기능인데
    신경 써서 보지 않으면 눈에 잘 보이지 않는 곳이라 아쉽네요.
    그래도 나중에 한번 도전해 보겠습니다 🙂

    https://chaeyoung.tistory.com/attachment/cfile4.uf@99EA11415E0DFE4D2B1206.mp4

    1. 그래도 단축키 활용에 능하지 않으면 창을 닫을 땐 무조건 한 번 보는 부분이긴 합니다. 😁
      그리고 이게 글자가 생겼다가 없어졌다 하니까 정말 큰 모니터 쓰는 게 아니면 시야에 들어오긴 하더라고요 ㅎㅎ

      https://chaeyoung.tistory.com/attachment/cfile30.uf@9938D4465E05C3E60A8CFD.mp4

  • 땀똔

    오~ 쥐기네요! @.@
    https://i.imgur.com/27UlQLR.gif

    1. 참 괜찮은 기능이긴 한데, 눈에 잘 보이는 영역이 아니라서 아쉽습니다. ㅋㅋㅋㅋ

      https://chaeyoung.tistory.com/attachment/cfile5.uf@995DC3345E05CDFE0F706A.mp4