Question

我目前正在为基于开源项目的大学项目设计一个网站。我的网站基于无限滚动布局，每个部分的想法是让终端看起来像命令行，并将文本打印到这些屏幕。

我已经为自键型文本实现了reality-typewriter.js（https://github.com/fardjad/realistic-typewriter.js）。要在预定义的时刻触发动画（当用户在页面的该部分时），我被告知使用waypoint.js（https://github.com/imakewebthings/jquery-waypoints）

现在我的问题是一起实施2。

Typewriter.js就是这样实现的。

    var typewriter = require('typewriter');
    var twSpan = document.getElementById('typewriter');
    var tw = typewriter(targetDomElement).withAccuracy(90)
                                 .withMinimumSpeed(5)
                                 .withMaximumSpeed(10)
                                 .build();

    tw.clear()
    .type('TEXT GOES IN HERE')

 });

我在这里不明白的是变量的语法在开始时，我的业余眼睛似乎有点畏缩。

tw.clear（）行 - 我假设tw是变量而.clear做了什么？

现在是航点库 - 我之前使用的是typed.js库，但它的功能有点受限，我被建议转到现实的typewriter.js，代码似乎不起作用与Realistic-typewriter.js一样。

以下是其文档中waypoint.js的示例代码。

   $('.thing').waypoint(function() {
     // i tried to put the above code in here but it doesn't seem to work
   ); offset: '50%'
   });

基本上我需要知道如何组合waypoint.js和realistic-typewriter.js，但对这些工作过程的任何解释也会非常有用。

Answer 1

tw是一个正在访问“clear”方法的对象，我猜这个方法清除了元素，因此它可以输入它。

此外，看起来你的航点代码有些不对劲。应该是这样的：

$('.thing').waypoint(function() { 
    //code goes here
}, { offset: '50%' });

如果您将现实打字机代码放在那里，它应该在您到达该元素后运行它。

结合jQuery库：Realistic-typewriter.js和waypoint.js

1 个答案: