최종 수정일 :
(1년 전)
예전에 작성했던 글자 적고 지우는 스크립트를 타이틀에 사용하는 방법입니다.
예전엔 무조건 글자를 적고 지우는 기능만 넣어뒀는데, 이번엔 글자를 단순히 적기만 하고 끝나는 기능과 지우는 애니메이션은 생략하고 적기만 하는 애니메이션 두 가지를 추가했습니다.
또한, Array뿐 아니라 String도 사용할 수 있도록 업데이트했습니다.
function typeTitle(title, animation, speed) { const isString = typeof(title) === "string"; let i = 0, j = 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(0, i)}`, i++, setTimeout(type, speed) ) : ( 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(0, i), i--, 0 == i && (document.title = "\u200E"), setTimeout(remove, speed) ) : ( 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)
글자를 적는 시간을 조절하실 수 있습니다.
과하게 빠르게 설정하면 두세 글자씩 적히는지라 적당한 속도를 유지해주시는 게 중요합니다.
