javascript - 结合 jQuery 库 : realistic-typewriter. js 和 waypoint.js

Question

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

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

现在我的问题是同时实现两者。

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 做了什么？

现在是 waypoint 库——我之前在 typed.js 库中使用这个很好，但它的功能有点受限，我被建议转移到 realistic-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%' });

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