어느 곳을 클릭 할 때마다 효과를!
사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다.
생각보다 매우 쉬우니 가볍게 컨트롤 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 쪽 수치도 가며 자신만의 스타일로 맞출 수 있다. 물론 그냥 사용해도 무리는 없을 듯 싶다. 사실 정확히 말하면 클릭했을 때 효과가 아니고 마우스를 클릭 후 떼었을 때의 효과다. 이 차이정도만 알고 있으면 될 것 같다. 쉽고 가볍지만 효과는 좋은 마우스 이펙트 효과를 알려드리며 이번 포스팅은 여기까지 마치도록 하겠다.
정말 재밌는 기능입니다. 나중에 써먹어봐야겠습니다
계속 여기저기 클릭하게 하는 매력이 있네요 ㅎㅎ
블로그 많이꾸몄어요 감사합니다
재미난 추석 연휴 보내셨길 바라며, 이 꿀팁은 나중에 써먹어봐야겠습니다~ ^^
저도 덕분에 생존신고합니다! 땀똔님도 추석 잘 보내셨죠? 오늘 하루도 화이팅 입니다~!
밑에있는 opacity 부분을 -하면 동그라미 크기가 작아지네요!!