존경하는 선생님 포트폴리오 관련 작업물 사이트를 만들다 의문이 생겨 글 올립니다.
다름이 아니라 jquery없이 만들고 있는데 onclick이벤트로 이벤트를 줬는데
처음 화면 들어가면 꼭 한번에 작동 안하고 두번 쯤 클릭해야 작동하고 그 다음부턴 작동이 잘됩니다
이거 왜이럴까요 불러오는게 느린걸까요 왜죠...찾아봤는데 잘 모르겠어서 질문드립니다
우선 코드는
HTML
<div class="card sunrise__container">
<div class="sunrise__video">
<video src="img/Sunrise-22609.mp4" loop muted autoplay playsinline></video>
</div>
<div class="sunrise__text">
<span>Click the Video</span>
</div>
</div>
CSS
.sunrise__container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: #c4baba;
}
.sunrise__video {
position: absolute;
width: 300px;
height: 400px;
overflow: hidden;
-webkit-clip-path: circle(15% at 50% 30%);
clip-path: circle(15% at 50% 30%);
transition: -webkit-clip-path 2s ease;
transition: clip-path 2s ease;
transition: clip-path 2s ease, -webkit-clip-path 2s ease;
cursor: pointer;
}
Javascript
document.querySelector('.sunrise__video').onclick = function(){
if(document.querySelector('.sunrise__video').style.clipPath == "circle(15% at 50% 30%)"){
document.querySelector('.sunrise__video').style.clipPath = "circle(100% at 50% 30%)";
} else{
document.querySelector('.sunrise__video').style.clipPath = 'circle(15% at 50% 30%)';
}
}
이렇습니다 보기 편하게 올리고픈데 혹시나 깃주소는
https://github.com/pomeranian91/ani_notepad.git
페이지는
https://pomeranian91.github.io/ani_notepad/
입니다.
