배너 이미지

웹사이트 제목에 효과 주기

최종 수정일 : (2년 전)

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

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

또한, 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

이메일 주소는 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
카카오페이 qr코드 모바일이시라면 클릭