반응형
const title = document.title; // 타이틀
let length = title.length; // 타이틀 길이
let isRemove = true; // 지우는지 채우는지
setInterval(() => {
if (isRemove) { // 지울 때 길이 -1 씩, 끝까지 지우면 isRemove 를 false 로 바꿔서 채우는걸로
length > 0 ? length -= 1 : isRemove = false
} else { // 채울 때 길이 +1 씩, 끝까지 채우면 isRemove 를 true 로 바꿔서 지우는걸로
length < title.length ? length += 1 : isRemove = true;
}
// "\u200E" 를 해주는 이유는 title 이 공백이면 주소값이 표시된다.
document.title = length == 0 ? "\u200E" : title.substring(0, length);
}, 300); // 300 은 0.3초, 너무 빠르면 글자가 여러개씩 지웠다 채워지므로 적당히 조절
ㄹ혼ㅇㅀㅇㅀ
const title = document.title;
function titleAnimation1(title) {
let length = title.length; // 타이틀 길이
let isRemove = true; // 지우는지 채우는지
setInterval(() => {
if (isRemove) { // 지울 때 길이 -1 씩, 끝까지 지우면 isRemove 를 false 로 바꿔서 채우는걸로
length > 0 ? length -= 1 : isRemove = false
} else { // 채울 때 길이 +1 씩, 끝까지 채우면 isRemove 를 true 로 바꿔서 지우는걸로
length < title.length ? length += 1 : isRemove = true;
}
// "\u200E" 를 해주는 이유는 title 이 공백이면 주소값이 표시된다.
document.title = length == 0 ? "\u200E" : title.substring(0, length);
}, 300);
}
function titleAnimation2(title) {
let isRemove = true;
setInterval(() => {
document.title = isRemove ? "\u200E" : title;
isRemove = !isRemove;
}, 500);
}
반응형