My idea is to show an image of an ice-cube that the use must click, only to then show the ice cube breaking. After only 3 seconds, the ice cube will be fully broken and the GIF complete (it's not an infinite clip) and then the page will scroll down to the "About" of the page. This is the div where I have the Ice Cube image:
<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>
And the next section has an id = #about which it should scroll to. I'm using the Bootstrap page-scroll plug-in to allow the smooth-scroll to occur on click, but what I want is for that smooth-scroll not happen until the GIF is done playing. The following script is to replace my current ice cube with the breaking ice cube GIF.
<script>
function changeImg() {
$("#icebreaker").attr("src", "img/ice-cube.gif");
}
</script>
I have tried using the settimeout scroll but I couldn't get it to work and I've tried breaking the page for a few seconds before it scrolled but then it would stop the animation as well since it breaks the entire page. If anyone can help me figure out some sort of chain-reaction, that would be great!
Try this one
function changeImg() {
var img = document.getElementById("icebreaker");
img.onload = function() {
setTimeout(function() {
/*your scroll fn here*/
}, 5000)
}
img.src = "img/ice-cube.gif";
}The timeOut fn is working you need to have jquery.ui.js as well to do this check working sample here