[JAVASCRIPT/CSS] 마우스 왼쪽 클릭 이벤트

[JAVASCRIPT/CSS] 마우스 왼쪽 클릭 이벤트

 

블로그 내의 마우스 왼쪽 버튼 클릭 이벤트 입니다.

CSS

<style type="text/css">

	div.clickEffect{
    
		position:fixed;
        
		box-sizing:border-box;
        
		border-style:solid;
        
		border-color:#4C4C4C;
        
		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; 

		}

	}

</style>

 

JAVASCRIPT

<script type="text/javascript">

    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>