마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요.. 정보
HTML 마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요..
본문
질답에 올라온것 오류 수정하고 적용해 보니 재미 있어서 팁자료실에 올립니다.
효과음 다운로드
https://record-ay.tistory.com/32
<audio id='audio_play' src='/click.mp3'></audio>
<style type="text/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;
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("body").attr("onclick", "play()");
});
function play() {
var audio = document.getElementById('audio_play');
if (audio.paused) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
}
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>
효과음 다운로드
https://record-ay.tistory.com/32
추천
0
0
댓글 0개