deo2kim
맞왜틀
deo2kim
전체 방문자
오늘
어제
  • 분류 전체보기
    • CS
      • Algorithm
      • Data Structure
      • Network
      • DB
      • OS
    • Algorithm Problem
      • Python
      • JavaScript
    • Programming language
      • Python
      • JavaScript
    • Tool
      • Jquery
      • React
    • 개발
    • Infra

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

최근 댓글

최근 글

티스토리

반응형
hELLO · Designed By 정상우.
deo2kim
카테고리 없음

title 효과 주기

카테고리 없음

title 효과 주기

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);
		}
반응형
저작자표시 비영리 변경금지 (새창열림)
    deo2kim
    deo2kim
    코딩 기록하기

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.