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

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

생각보다 매우 쉬우니 가볍게 컨트롤 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 쪽 수치도 가며 자신만의 스타일로 맞출 수 있다. 물론 그냥 사용해도 무리는 없을 듯 싶다. 사실 정확히 말하면 클릭했을 때 효과가 아니고 마우스를 클릭 후 떼었을 때의 효과다. 이 차이정도만 알고 있으면 될 것 같다. 쉽고 가볍지만 효과는 좋은 마우스 이펙트 효과를 알려드리며 이번 포스팅은 여기까지 마치도록 하겠다.

댓글을 달아 주세요

  1. 묘한 오빠

    뭔가 했더니..., ㅎㅎ
    정말 재밌는 기능입니다. 나중에 써먹어봐야겠습니다

  2. 베짱이

    클릭하면 동그란 파형이 커졌다가 없어지네요. ㅋㅋ

  3. Marshall K

    뭔가 원이 조금 더 작고 효과가 조금 더 빠르면 괜찮지 않을까 싶네요 ㅎㅎ
    계속 여기저기 클릭하게 하는 매력이 있네요 ㅎㅎ

  4. 아니메게임즈

    저 부분을 css에 아무곳에 붙여넣기했는데 효과가 안생기는데 무슨문제가있을까욤

  5. 땀똔

    잘 지내셨습니까~ 생존인사 드립니다.. ㅋ
    재미난 추석 연휴 보내셨길 바라며, 이 꿀팁은 나중에 써먹어봐야겠습니다~ ^^

    • 꽁기웹디
      2019.09.18 14:09 신고

      땀똔님 잘 지내셨나요~?^-^
      저도 덕분에 생존신고합니다! 땀똔님도 추석 잘 보내셨죠? 오늘 하루도 화이팅 입니다~!

  6. So_Far

    크기와 색상은 변경이 불가능할까요?

  7. 기타치는 태하 TAEHA GUITAR

    감사합니다~
    밑에있는 opacity 부분을 -하면 동그라미 크기가 작아지네요!!

  8. pinemint

    적용했는데 너무 예쁘네요 ^^ 포스팅 고맙습니다!

  9. 지노진호

    잘 적용했습니다. 귀엽고 재밌네요 ㅎㅎ 감사합니다!