티스토리 마우스 클릭시 원형 파동 만들어지는 효과

반응형
반응형

티스토리의 여러 블로그를 돌아다니다 보면 멋지게 꾸미거나 재밌는 효과들을 블로그에 적용시킨 것을 심심찮게 볼 수 있습니다. 보통 자바스크립트를 활용하여 블로그를 좀 더 생동감 있게 꾸며주는 것인데요!

 

지금 이 글을 읽으시면서 마우스를 빈 공간에 클릭해보세요. 어떤가요? 둥그런 원이 점점 커지는 것을 확인하셨나요? 이번 포스팅에서는 티스토리 블로그에서 마우스 클릭시 원형 파동이 만들어지는 효과를 알아보려고 합니다. 역시 자바스크립트 소스가 다 완성돼있기 때문에 우리가 할 일은 적당한 곳에 붙여넣기만 하면 됩니다.

 

참고로 저는 이 효과를 제 블로그에는 적용하지 않았습니다. 그 이유는 글을 읽을 때 마우스를 클릭하면서 읽으시는 분들이 많은데, 계속 원형 파동이 생기면 글을 읽는데 방해가 될 수도 있겠다 싶어서입니다. 그리고 제 블로그는 마우스 드래그를 허용해놓았고, 드래그할 때 색상까지 넣었기 때문에 동그라미까지 반복적으로 점점 커지면 다소 정신없을 수도 있기 때문입니다.

 

다만 이 게시글에는 효과가 나타나도록 이 게시글 자체에만 코드를 넣어주었습니다. 이 게시글에만 효과가 나타나도록 하는 방법은 이 글의 하단 부분에 적어두었습니다.

 

그럼 본격적으로 이 효과를 낼 수 있는 소스를 말씀드리겠습니다.

 

티스토리 블로그에서 마우스 클릭시 동그라미가 점점 커지게 만드는 효과를 내는 방법은 다음과 같습니다.

 

1. 티스토리 스킨편집의 HTML편집 화면에서 <head>와 </head>사이에 아래의 소스를 넣습니다. 저는 편의상 </head> 바로 위쪽에 아래 소스를 붙여넣었습니다.

<!--마우스 클릭 효과-->
<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);	
</script>

 

2. CSS편집 화면에서 아래의 소스를 적당한 곳에 넣습니다. 저는 편의상 CSS의 가장 하단 부분에 붙여넣었습니ㅏㄷ.

/*마우스 클릭 효과*/
div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#828282;
	border-radius:50%;
	animation:clickEffect 0.8s ease-out;
	z-index:5;
}
@keyframes clickEffect{
	0%{
		opacity:1;
		width:0.5em; height:0.5em;
		margin:-0.25em;
		border-width:0.3rem;
	}
	100%{
		opacity:0.1;
		width:15em; height:15em;
		margin:-7.5em;
		border-width:0.01rem;
	}
}

 

만약 저처럼 특정 글에만 이 효과를 넣고 싶다면 일단 글쓰기 화면에서 글쓰기 모드를 '기본모드'에서 아래와 같이 'HTML'모드로 바꿉니다. 그리고 직접 <head></head> 태그를 입력 후 그 사이에 위의 첫번째 자바스크립트 코드를 넣고, <body></body>태그를 입력하고 그 사이에 <style></style>태그를 입력한 후 다시 그 사이에 위의 두번 째 자바스크립트 코드를 넣어주면 됩니다.

어떤가요, 적용 후 성공적으로 효과가 나타나나요? 간단하지만 블로그를 한층 더 동적으로 만들어주는 자바스크립트 코드를 알아보았습니다.

반응형

Designed by JB FACTORY