使文本显示逐个字母，当鼠标移动

这必须是显示文本的最高档的途径之一。每个字母只在移动鼠标时出现。快速移动，文字快速出现，移动缓慢，外观缓慢。使文本显示逐个字母，当鼠标移动

什么是接近和实现这一目标的最佳方式是什么？

Example（一旦向下滚动，然后将鼠标移动）

非常感谢您的帮助家伙！

2017-05-30 Jay M

使用JavaScript。你有没有试过编码任何东西？ –

我对编码相当陌生，大部分时间都是花时间将代码片段放在一起，或者使用前端编辑器工作。但我在学习。也许可以通过一些文本来解决这个问题，并为每个字母单独设置动画。但我相信有一个更聪明的方法（可能是一个maccambridge建议）。 –

只看这个例子，你可以看到每个字母都在它自己的div中呈现。您可以像控制DOM节点一样控制每个div的渲染。

运动发生在一个固定的速度，不管你是如何快速移动鼠标。所以在单帧速率和持续时间下有一个动画。移动鼠标可以有效控制“播放/暂停”功能。

所以你将不得不创建每个字母的动画作为更大动画的一部分。然后，您需要聆听鼠标事件以了解鼠标是否正在移动。如果是，则播放动画。如果没有，请暂停。

这是短期的，高层次的答案。也许别人可以用一些代码来帮助你。

2017-05-30 21:03:22 mccambridge

非常感谢。我非常感谢你的帮助！虽然我的编码知识有限，但我理解您所描述的概念，并且可能能够在未来继续实施。 –

不知道这是一个完整的how-to的论坛。我发现这个库在谷歌搜索周围。并不完全符合你的要求，但你可能会发现它很有趣：http://textillate.js.org/谷歌的东西，如“文字动画CSS关键帧”，你会发现一些可以学习的资源。 – mccambridge

谢谢！我已经知道了纺织品，并且研究过它。你认为这可能是解决这个问题的最好方法吗？我倾向于使用snap.svg来尝试它，并简单地使用文本作为.svg。最困难的可能来自“聆听鼠标事件”，因为我从来没有做过或看到过播放/暂停概念。 –

回答