Question

我在我的网站@ http://prysmal.com上使用了typed.js，我在主页滑块上输入的文本动画方面遇到了问题。当您停留在页面上时，打字动画会同步，但是一旦切换标签，输入动画就会暂停，而背景滑块会继续循环，从而导致文本与其相关的背景不同步。是否有任何方法可以阻止键入的动画在切换浏览器选项卡时停止并让它继续循环使用背景滑块？

这是我对旋转木马的javascript（使用Backstretch）和typed.js

        $('bigWrapper').backstretch([
            "img/homeIntro.jpg"
          , "img/videoIntro.jpg"
          , "img/photoIntro.jpg"
          , "img/mixingIntro.jpg"
          , "img/webIntro.jpg"
        ], {fade: 750});

        $('bigWrapper').backstretch("pause");

        //autotype

        $(".TextHolder2").typed({
            strings: ["Production", "Videography", "Photography", "Audio Engineering", "Web Development"],
            typeSpeed: 30,
            backDelay: 1500,
            loop: true,
            preStringTyped: function(pos, self) {       
                $('bigWrapper').backstretch('show', pos);
            };
        });

Answer 1

这是因为浏览器如何处理typed.js使用的setTimeout()。为了节省资源，当您没有专注于页面/选项卡时，大多数浏览器会停止运行这些异步回调。

尝试在浏览器中同步两个不同的计时器是徒劳的。相反，您应该将您的轮播（滑块）视为主计时器和从属类型。

查看您的轮播插件是否包含您可以收听的某种next或advance个活动。然后看看你是否可以配置打字，直到你告诉它;基本上是无穷大的延迟。然后，当从您的轮播中触发advance事件时，您也可以将键入的内容告诉advance。这样他们总是保持同步。

您正在使用Backstretch，它可以选择开始暂停。

$('whatever').backstretch({
    paused: true
});

然后，您可以侦听Typed上的事件，以便在Backstretch转换时进行控制。例如，以下（猜测）会使backstretch与键入的帧相同，就像帧即将被键入一样。

$('something').typed({
    preStringTyped: function(pos, self) {
        $('whatever').backstretch('show', pos);
    });
});

切换浏览器选项卡时，Typed.js文本动画暂停

1 个答案: