내 아이디어는 사용시 클릭해야하는 얼음 조각의 이미지를 보여 주어야만 얼음 조각이 깨지는 것을 보여주는 것입니다. 단 3 초 후에 아이스 큐브가 완전히 깨지고 GIF가 완성되고 (무한 클립이 아님) 페이지가 페이지의 "정보"로 스크롤됩니다. 이것은 Ice Cube 이미지가있는 div입니다.
<div class="row">
<div class="col-lg-12 imageWrap page-scroll">
<a href="#about"><img id="icebreaker" onclick="changeImg();" src="img/wiggle.gif"></a>
<p class="callToAction">Break The Ice</p>
</div>
</div>
그리고 다음 섹션에는 스크롤해야하는 id = #about이 있습니다. 클릭시 부드러운 스크롤이 발생하도록 부트 스트랩 페이지 스크롤 플러그인을 사용하고 있지만 원하는 것은 GIF 재생이 완료 될 때까지 부드러운 스크롤이 발생하지 않는 것입니다. 다음 스크립트는 현재 아이스 큐브를 깨는 아이스 큐브 GIF로 교체하는 것입니다.
<script>
function changeImg() {
$("#icebreaker").attr("src", "img/ice-cube.gif");
}
</script>
settimeout 스크롤을 사용해 보았지만 작동하지 않았고 스크롤하기 전에 몇 초 동안 페이지를 나누려고 시도했지만 전체 페이지를 끊기 때문에 애니메이션도 중지됩니다. 누군가가 일종의 연쇄 반응을 알아내는 데 도움을 줄 수 있다면 좋을 것입니다!
이걸로 해봐
function changeImg() {
var img = document.getElementById("icebreaker");
img.onload = function() {
setTimeout(function() {
/*your scroll fn here*/
}, 5000)
}
img.src = "img/ice-cube.gif";
}timeOut fn이 작동 중이므로 jquery.ui.js도 있어야 여기에서 작업 샘플을 확인할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다