아보카도 마우스 클릭효과 추가 질문드립니다.
본문
홈페이지 아무곳이나 클릭할 경우 클릭 효과와 사운드가 들리도록 하고 싶은데,
CSS 및 HTML을 codepen에 붙여넣기하여 테스트해봐도 출력이 안 됩니다.
적용하고 싶은 효과
https://fdossena.com/?p=html5cool/clickfx/i.frag
클릭 사운드는 head.php 파일 <head>아래에
https://record-ay.tistory.com/32 해당 코드 사용했습니다.
모쪼록 해결 도와주시면 감사하겠습니다. ㅜㅜ
답변 1
<body onclick="play()">
<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">
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>
이렇게만 하면 클릭시 마다 소리도 잘 납니다.
원도 생성이 잘 됩니다.
<audio id='audio_play' src='/click.mp3'></audio>
상운드 파일은 맞게 잘 불러오세요...
정상적으로 적용됐습니다! 감사합니다 ㅠㅠ
