使文本顯示逐個字母，當鼠標移動

這必須是顯示文本的最高檔的途徑之一。每個字母只在移動鼠標時出現。快速移動，文字快速出現，移動緩慢，外觀緩慢。使文本顯示逐個字母，當鼠標移動

什麼是接近和實現這一目標的最佳方式是什麼？

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。最困難的可能來自「聆聽鼠標事件」，因爲我從來沒有做過或看到過播放/暫停概念。 –

回答