如何在gif动画完成后激活页面滚动

How to activate page-scroll after gif animation is complete

本文关键字：激活 滚动 gif 动画      更新时间：2023-09-26

我的想法是显示一个冰块的图像，用户必须点击，然后才显示冰块破碎。仅仅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 = #，它应该滚动到这个位置。我使用Bootstrap页面滚动插件来允许单击时平滑滚动，但是我想要的是在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来做这个查看工作样例

使用超时激活页面滚动

相关文章：