어느 곳을 클릭 할 때마다 효과를!
사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다.
생각보다 매우 쉬우니 가볍게 컨트롤 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 쪽 수치도 가며 자신만의 스타일로 맞출 수 있다. 물론 그냥 사용해도 무리는 없을 듯 싶다. 사실 정확히 말하면 클릭했을 때 효과가 아니고 마우스를 클릭 후 떼었을 때의 효과다. 이 차이정도만 알고 있으면 될 것 같다. 쉽고 가볍지만 효과는 좋은 마우스 이펙트 효과를 알려드리며 이번 포스팅은 여기까지 마치도록 하겠다.
