반응형
mouseEffect.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/mouseEffect.css">
<script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
<div class="container">
<h1>클릭시 마우스 효과</h1>
</div>
</body>
</html>mouseEffect.scss
@charset 'UTF-8';
.container{
width:1080px; margin:0 auto;
h1{padding:20px;border-bottom:1px solid #ccc;}
}
.clickEffect{
position:fixed;
box-sizing:border-box;
border-style:solid;
border-color:#111;
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.5em;
}
100%{
opacity:0.2;
width:15em; height:15em;
margin:-7.5em;
border-width:0.03em;
}
}common.js
//이벤트 function 정의
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에 clickEffect function 등록
document.addEventListener('click',clickEffect);** 위 이벤트는 css 애니메이션 amimationend 이벤트를 지원해야 작동합니다.
IE10+ 이하 브라우저에서 호환하지 않습니다.
참고
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 숫자 3자리마다 콤마찍기(정규식) (1) | 2021.02.15 |
|---|---|
| [javascript] var, let, const 차이점 (0) | 2020.02.05 |
| [javascript] 배열 문자열 검색 (0) | 2020.02.01 |
| [Javascript] 매개변수 전달인자에 따른 바인딩 (0) | 2018.04.30 |
| [Javascript] 함수의 매개변수(arguments 객체) (0) | 2018.04.27 |