카테고리 없음

title 효과 주기

deo2kim 2021. 11. 8. 16:36
반응형
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);
		}
반응형