안녕하세요~ 오늘은 마우스 효과를 주는 방법에 대해 알아 보도록 하겠습니다. 마치 호수에 돌을 던지면 원형 파형이 생성되듯이 원이 점점 커지면서 사라지는 효과 입니다. 원본 출처는
fdossena.com/?p=html5cool/clickfx/i.frag
위 사이트입니다.
저는 위 사이트의 소스를 조금 응용해서 파형이 조금더 천천히 생기도록 했으며 원형의 색상도 핑크색으로 바꾸었답니다.
지금 이 블로그에도 적용해봤는데 문제없이 실행이 잘 되는것을 확인했습니다.
블로그를 꾸미는것에 관심이 많으신 분들은 한번 적용해보는것도 좋을듯합니다.
<!-- 클릭효과 -->
<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>
<!-- 클릭효과 -->
위 소스를 html 편집창에서 <head> 와 </head> 사이에 붙여넣으세요~
/** 클릭이벤트*/
div.clickEffect{
position:fixed;
box-sizing:border-box;
border-style:solid;
border-color:#f47093;
border-radius:50%;
animation:clickEffect 0.8s ease-out;
z-index:-1;
}
@keyframes clickEffect{
0%{
opacity:1;
width:0.5em; height:0.5em;
margin:-0.25em;
border-width:0.3rem;
}
100%{
opacity:0.1;
width:15em; height:15em;
margin:-7.5em;
border-width:0.01rem;
}
}
/** 클릭이벤트*/
위 소스를 HTML 편집 - CSS 탭에 붙여넣으세요~
(css 소스는 위 첨부파일을 다운로드 해서 복사해서 붙여넣으세요. 줄바꿈이 적용되지않아서 소스가 제대로 작동을 못하는군요... 티스토리 코드블럭 기능을 이용해서 css 코드를 넣었는데 아직 완벽하지는 않은가 봅니다. )
위 소스에서 9번째 줄 z-index:-1; 부분은 레이어의 개념입니다. 만들어지는 파형이 그림이나 글자 박스같은것과 겹치게 되면 제일 상단에 보이게 할지 아니면 가려지게 할지를 결정하는 중요한 요소인데요 저는 -1 값을 줬기때문에 숨기기가 되었습니다. 만약 최상단에 보이게 하고 싶다면 9999 정도로 높은 값을 주시면 됩니다. 마우스 효과가 작동이 안될때 이 값을 수정하면 나오는경우도 있으니 참고하세요. 북클럽 스킨의 경우 프로필 사진을 클릭했을때 메뉴가 안보이는 현상이 있으니 -1 값을 추천드립니다.
그리고 파형이 점점 커지면서 사라지는 속도를 좀더 빠르게 하고 싶다면
animation:clickEffect 0.8s ease-out;
이부분에서 0.8s 를 수정해서 0.4 정도로 해주시면 됩니다.
만약 원형의 색상을 다른색으로 바꾸고 싶다면
border-color:#f47093;
이 부분을 찾아서 적당한 색상으로 변경해주시면 됩니다.
공감♥ 은 고래도 춤추게 합니다~ ^^
댓글