组合jQuery库:reality -type .js和waypoint.js

Combining jQuery libraries: realistic-typewriter.js and waypoint.js

本文关键字：js waypoint -type reality jQuery 组合      更新时间：2023-09-26

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

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

现在我的问题是将两者结合起来。

type .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库，但它的功能有点有限，我被建议转移到现实的打字机。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和reality -type .js，但是任何对这些工作过程的解释也会很有帮助。

tw是一个访问"clear"方法的对象，我猜该方法会清除元素，以便它可以在其中键入。

另外，看起来你的航路点代码有些东西是关闭的。应该是这样的:

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

如果你把现实打字机的代码放在那里，它会在你到达那个元素时运行它。

相关文章：