마우스 클릭 효과

어느 곳을 클릭 할 때마다 효과를!

사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다.

생각보다 매우 쉬우니 가볍게 컨트롤 C 컨트롤 V로 효과를 만들어보도록 하자.
출처 사이트 : https://fdossena.com/?p=html5cool/clickfx/i.frag

CSS 코드

HTML 편집 - CSS 탭 - 아래 코드를 복붙 하면 끝.

div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#000000;
	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.5rem;
	}
	100%{
		opacity:0.2;
		width:15em; height:15em;
		margin:-7.5em;
		border-width:0.03rem;
	}
}

HTML 코드 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>

이 코드를 보면 border-color나 radius의 수치, clickEffect 쪽 수치도 가며 자신만의 스타일로 맞출 수 있다. 물론 그냥 사용해도 무리는 없을 듯 싶다. 사실 정확히 말하면 클릭했을 때 효과가 아니고 마우스를 클릭 후 떼었을 때의 효과다. 이 차이정도만 알고 있으면 될 것 같다. 쉽고 가볍지만 효과는 좋은 마우스 이펙트 효과를 알려드리며 이번 포스팅은 여기까지 마치도록 하겠다.