본문 바로가기

프로그래밍(코딩)/HTML,CSS(블로그)

티스토리 블로그 메뉴 아이콘 애니메이션 넣는 방법 알아보기

반응형

'티스토리 블로그 메뉴 아이콘 애니메이션 넣는 방법 알아보기'

 

 

저번 글에서는 마우스 클릭 시에 물결 효과가 나타나게 하는 방법에 대해 알아보았었는데요, 이번에는 개인적으로 블로그 화면에서 부자연스럽다고 생각했던 메뉴 아이콘 애니메이션 효과를 넣어 자연스럽게 전환이 되도록 하는 방법에 대해 알아보고자 합니다.

 

 


 

 

이번 티스토리 블로그 메뉴 아이콘 애니메이션 기능 아래 글의 도움을 받아 구현하였습니다.

 

 

티스토리 메뉴 버튼에 애니메이션 넣기

이 블로그를 포함한 많은 곳의 UI에서 세 줄짜리 메뉴 버튼 (일명 햄버거 버튼)을 사용하고 있다. 지금 사용하는 블로그 테마의 메뉴 버튼에는 한번 클릭했을 때 X자로 변하는 애니메이션이 없었

lhy0.tistory.com

 

 

 

 

그럼 이제 메뉴 아이콘 애니메이션을 구현하는 방법에 대해 소개하도록 하겠습니다. 우선 티스토리 블로그 관리자 화면에서 '스킨 편집'으로 들어갑니다. 그 다음 'HTML 편집' 창으로 들어가줍니다.

 

 

 

 

이번 글에서 소개할 티스토리 블로그 메뉴 아이콘 전환 효과를 적용하는 것은 간단한 CSS 코드 편집만으로 구현이 가능합니다.

 

 

 

#header .mobile-menu {
	position: absolute;
	top: 20px;
	left: 33px;
	z-index: 500;
	width: 40px;
	height: 40px;
	outline: none;
}
#header .mobile-menu span {
	transition: 0.5s;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 2px;
	margin: -2px 0 0 -13px;
	background-color: #000;
	text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
	transition: 0.5s;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 2px;
	margin-left: -13px;
	background-color: #000
}
#header .mobile-menu:before {
	margin-top: -9px;
}
#header .mobile-menu:after {
	margin-top: 5px;
}
#header .mobile-menu.on {
	transition: 0.5s;
	position: fixed;
}
#header .mobile-menu.on span {
	opacity: 0;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
	transition: 0.5s;
	margin-top: -2px;
}
#header .mobile-menu.on:before {
	transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
	transform: rotate(45deg);
}

 

코드를 참고하셔서 간단하게 코드를 CSS 창에서 수정해주시면 됩니다. 사용자에 따라 애니메이션 지속 시간 혹은 움직이는 모션을 수정하셔서 적용하실 수도 있습니다.

 

 

 

 

코드 수정이 완료되었다면, 적용을 하신 다음, 블로그 웹 페이지를 열어서 확인하게 되면 작동되는 모습을 있습니다.

 

 


 

 

 

이렇게 간단한 CSS 코드를 이용해 블로그 메뉴 아이콘에 애니메이션을 적용시켜보았습니다. 기존의 밋밋한 효과보다 동적인 모션이 훨씬 보기에 좋다고 느껴져 개인적으로 매우 만족스러운 작업이였습니다.

 

 

 

 

 

 

 

 

 

 

 

추천하는 글

 

 

애플워치 SE 44mm 스페이스그레이 개봉기 및 약 3개월 사용후기

'애플워치 SE 44mm 스페이스그레이 개봉기 및 약 3개월 사용후기' 기존에는 계속 갤럭시 시리즈만 사용해오다 보니 갤럭시 기어S3 모델을 함께 사용했었습니다. 그런데 최근에 아이폰 11 프로를 사

anywhereifyoucan.com

 

 

Java 독학하기-(10) 자바 언어의 클래스와 객체(1) 알아보기

'Java 독학하기-(10) 자바 언어의 클래스와 객체(1) 알아보기' 이번에 자바 프로그래밍에서 알아볼 내용은 바로 클래스와 객체입니다. 자바 프로그래밍은 객체 지향형 언어라 다양한 클래스와 객체

anywhereifyoucan.com

 

반응형