Question

我正在开发一个项目，我需要在用户滚动页面时自动编写文本（如打字效果）。

我想要在页面滚动0％时显示段落的0％字符，并在页面滚动50％时显示完整段落。它也应该相反。因此，如果用户向上滚动，角色应该逐个消失。

我已经有一个函数可以根据间隔创建我想要实现的效果，而不是滚动..

(function($) {
$.fn.writeText = function(content) {
    var contentArray = content.split(""),
        current = 0,
        elem = this;
    setInterval(function() {
        if(current < contentArray.length) {
            elem.text(elem.text() + contentArray[current++]);
        }
    }, 100);
};

})(jQuery);

http://jsfiddle.net/tQnG8/413/

我希望有人想在不使用插件的情况下分享他们如何解决这个问题的想法。

Answer 1

我认为你不能重复使用上面的代码来获得你想要的效果。虽然我确定你不需要我这样告诉你，但无论如何我都要总结一下：

我们必须：

听一个滚动事件，
计算页面滚动的百分比，
然后计算文本应该可见的索引
最后，展示它。

最困难的部分（imo）将是计算页面滚动百分比的第二步。以下是我的计算方法：

 var percent = (document.documentElement.scrollTop + window.innerHeight) / (document.body.clientHeight); // calculate the % the page is scrolled
 percent *= 2; //since we want 50% scroll to equate to 100% text

我们使用document.documentElement.scrollTop获取滚动偏移（以像素为单位），然后添加window.innerHeight以便我们获得滚动条的下边缘。然后我们简单地除以总可滚动高度，即document.body.clientHeight。最后，我们应该将计算的百分比乘以2，因为你希望50％的页面滚动等同于100％的可见文本。

一个有问题的是“滚动高度”取决于内容。因此，如果我们将“内容”与“滚动”联系起来，我们会得到一个讨厌的循环。

一个合适的解决方案是始终将内容文本“添加”/“布局”，并使用“可见性”。比较display: none;与visibility: hidden;的效果。

以下是我最终的结果：

 //this.children().detach();
 var $visible = $("<span style='visibility:visible;'></span>");
 var $hidden = $("<span style='visibility:hidden;'></span>"); //style='opacity:0.5;'   instead to visualise what is happening

 $visible.text(text); //or add it to $hidden instead, but I prefer this so that things degrade gracefully if the rest of the script fails
 this.prepend($visible).append($hidden);

以下是整个代码：

(function($) {
    $.fn.writeText = function(text) {
        //this.children().detach();
        var $visible = $("<span style='visibility:visible;'></span>");
        var $hidden = $("<span style='visibility:hidden;'></span>");
        //var $hidden = $("<span style='opacity:0.5;'></span>"); //to visualise what is happening

        $visible.text(text);
        this.prepend($visible).append($hidden);

        var scrollHandler = function() {
            var percent = (document.documentElement.scrollTop + window.innerHeight) / (document.body.clientHeight); // calculate the % the page is scrolled
            percent *= 2; //since we want 50% scroll to equate to 100% text

            var offset = Math.round(percent * text.length); //calculate the index to where the text should be visible

            //do the actual "writing"
            $visible.text(text.slice(0,offset));
            $hidden.text(text.slice(offset));
        };

        scrollHandler(); //initial call
        $(window).scroll(scrollHandler);

        return this; //return the jquery object for chaining
    }
})(jQuery);

您可以在此处看到演示内容： http://jsfiddle.net/sy45zs3v/

基于滚动位置的jQuery动画类型

1 个答案: