본문 바로가기

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

티스토리 HTML/CSS 마우스 클릭 시 효과 애니메이션 적용하는 방법

반응형

'티스토리 HTML/CSS 마우스 클릭 시 효과 애니메이션 적용하는 방법'

 

 

티스토리 블로그가 타 블로그에 비해 HTML/CSS언어를 통해 자유롭게 꾸밀 수 있다는 것이 큰 장점 중 하나인데요, 저도 요즘 저의 블로그 사이트 화면이 너무 정적으로 느껴져 약간의 애니메이션 효과를 적용하는 것이 좋을 것 같아 HTML/CSS 코드를 수정하면서 차근차근 하나씩 바꿔가고 있습니다. 그래서 이번 글에서는 마우스 클릭 시에 효과 애니메이션을 간단하게 적용하는 방법에 대해 소개하고자 합니다.

 

 


 

우선 이 글에서 소개할 마우스 클릭 시 효과 애니메이션은 강물에서 흔히 볼 수 있는 원형 파형 모양의 원이 생겨나 퍼지면서 사라지는 형태를 띄고 있습니다. 그럼 이제 어떻게 티스토리 블로그에 적용시키는 지에 대해 알아보도록 하겠습니다.

 

 

 

 

티스토리 블로그 관리 메뉴에서 '스킨 편집'으로 들어갑니다.

 

 

 

 

HTML/CSS 언어를 이용해 마우스 효과를 적용해야하므로 'html 편집'을 클릭합니다. 그럼 많은 코드들이 존재하는 창으로 이동하게 됩니다.

 

 

 

 

다른 코드들은 전혀 손 댈 필요가 없으며, 오직 아래 코드만 복사하여 <head>와 </head> 사이에 붙여넣기를 하시고, 붙여넣은 코드 위아래에 <script></script>만 추가로 입력해주시면 됩니다.

 

 

 

function clickEffect(e){
  var d=document.createElement("div");
  d.className="clickEffect";
  d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
  document.body.appendChild(d);
  d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
}
document.addEventListener('click',clickEffect);

 

 

 

 

 

그 다음으로 CSS 창으로 이동하여 아무데나 코드를 넣어도 상관은 없지만, 그래도 한눈에 알아볼 수 있는 위치에 아래 코드를 붙여넣기를 하시면 됩니다.

 

 

 

div.clickEffect{
  position:fixed;
  box-sizing:border-box;
  border-style:solid;
  border-color:#FFFFFF;
  border-radius:50%;
  animation:clickEffect 0.4s ease-out;
  z-index:99999;
}
@keyframes clickEffect{
  0%{
    opacity:1;
    width:0.5em; height:0.5em;
    margin:-0.25em;
    border-width:0.5em;
  }
  100%{
    opacity:0.2;
    width:15em; height:15em;
    margin:-7.5em;
    border-width:0.03em;
  }
}

 

 

 

추가로 마우스 클릭 시, 애니메이션 효과를 수정하고 싶으시다면,

 

원의 색을 바꾸고 싶다면 border-color: 색상코드;

애니메이션 지속 시간 변경은 animation:clickEffect 0.(초 설정)s ease-out;

 

참고하셔서 수정하시면 될 것 같습니다.

 

 

 

div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#FF007F;
	border-radius:50%;
	animation:clickEffect 0.4s ease-out;
	z-index:99999;
}
@keyframes clickEffect{
	0%{
		opacity:1;
		width:0.5em; height:0.5em;
		margin:-0.25em;
		border-width:0.3em;
	}
	100%{
		opacity:0.1;
		width:10em; height:10em;
		margin:-5em;
		border-width:0.01em;
	}
}

 

혹시나 제 블로그에 적용되어있는 마우스 효과 애니메이션 설정 값이 궁금하시다면, 위의 코드를 참고해주시면 되겠습니다.

 

 


 

 

 

Mouse Click Animation

How to do an Animation on Mouse Click in just 734 bytes. Touchscreen support included.

fdossena.com

 

이번 마우스 클릭 효과 애니메이션을 적용하는데 위 사이트 도움을 많이 받았음을 밝히며, 혹시나 티스토리 블로그에 위 효과 애니메이션 코드를 어떻게 적용하는 지에 대해 궁금하셨던 분들에게 많은 도움이 되었으면 좋겠습니다. 다음에 또 블로그 디자인이나 효과에 변화를 주게 된다면 소개해드리도록 하겠습니다.

 

 

 

 

 

 

 

 

 

 

추천하는 글

 

 

Java 독학하기-(8) 자바 언어의 '반복문'에 대해 알아보기

'Java 독학하기-(8) 자바 언어의 '반복문'에 대해 알아보기' 저번 글에서는 자바 언어에서의 '조건문'에 대해 알아보았는데요, 이번 글에서는 조건문에 이어서 자바 뿐만 아니라 여러 프로그래밍

anywhereifyoucan.com

 

 

애플 아이패드 프로 4세대 출시, 기존 아이패드 프로와의 차이점은?

'애플 아이패드 프로 4세대 출시, 기존 아이패드 프로와의 차이점은?' 현재 코로나 바이러스로 인해 상황이 그렇게 좋지 않은데 그 와중에 애플은 조용히 신제품 2종을 발표하였습니다. 바로 신

anywhereifyoucan.com

 

반응형