在页面滚动上使用GIF图像

Question

如何在单页网站中滚动页面上的图像动画，这样当我滚动到下一部分时，它会动画？假设我使用闭眼，当我滚动到下一部分时会打开。

Answer 1

您可以在此处使用libgif库：https://github.com/buzzfeed/libgif-js

它允许您以编程方式启动，停止或推进GIF帧。以下是来自源代码的示例：

<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif" width="360" height="360" rel:auto_play="1" rel:rubbable="1" />

<script type="text/javascript">
    $$('img').each(function (img_tag) {
        if (/.*\.gif/.test(img_tag.src)) {
            var rub = new SuperGif({ gif: img_tag } );
            rub.load(function(){
                console.log('oh hey, now the gif is loaded');
            });
        }
    });
</script>

然后，您可以使用get_length（gif中的帧数），move_to（转到特定帧）和jQuery / JavaScript中的onscroll的组合当用户滚动页面时设置框架。

Answer 2

还有ScrollMagic专门针对您的要求。不确定gif动画是否具体，但它们对于不同的元素动画有tons of examples。