Dies muss eine der besten Möglichkeiten sein, Text anzuzeigen. Jeder Buchstabe erscheint nur, wenn die Maus bewegt wird. Schnelle Bewegung, schneller Text, langsame Bewegung, langsame Erscheinung.Lassen Sie den Text Buchstabe für Buchstabe erscheinen, wenn die Maus bewegt wird
Was wäre der beste Weg, dies anzugehen und umzusetzen?
Example(scrollen einmal nach unten und dann bewegen Sie die Maus)
Vielen Dank für Ihre Hilfe Jungs!
Wenn Sie sich das Beispiel ansehen, sehen Sie, dass jeder Buchstabe in einem eigenen div gerendert wird. Sie können das Rendern jedes DIVs genau so steuern wie jeden anderen DOM-Knoten.
Die Bewegung erfolgt mit einer festen Geschwindigkeit, egal wie schnell Sie die Maus bewegen. So gibt es eine einzelne Animation mit einer einzigen Bildrate und Dauer. Durch Bewegen der Maus wird die Funktion "Wiedergabe/Pause" effektiv gesteuert.
Sie müssen also die Animation jedes Buchstaben als Teil einer größeren Animation erstellen. Dann müssen Sie ein Mausereignis anhören, um zu wissen, ob sich die Maus bewegt oder nicht. Wenn dies der Fall ist, spielen Sie die Animation ab. Wenn nicht, dann pausiere es.
Das ist die kurze Antwort auf hoher Ebene. Vielleicht kann Ihnen jemand anderes mit Code helfen.
Vielen Dank. Ich schätze deine Hilfe sehr! Obwohl meine Programmierkenntnisse begrenzt sind, verstehe ich das Konzept, das Sie beschrieben haben, und könnte das weiter unten implementieren. –
Nicht sicher, das ist das Forum für eine vollständige Anleitung. Ich habe diese Bibliothek gefunden. Es tut nicht genau das, wonach Sie suchen, aber Sie könnten es interessant finden: http://textillate.js.org/ Google-Sachen wie "Textanimation css keyframes", und Sie werden einige Ressourcen finden, von denen Sie lernen können. – mccambridge
Danke! Ich kannte bereits Textillate und habe nachgesehen. Denkst du, dass dies der beste Weg ist, um das zu erreichen? Ich war geneigt, es mit snap.svg zu versuchen und den Text einfach als .svg zu verwenden. Die meisten Schwierigkeiten werden wahrscheinlich durch das "Hören eines Mausereignisses" entstehen, da ich noch nie etwas mit dem Play/Pause-Konzept gemacht oder gesehen habe. –
Verwenden von JavaScript. Hast du schon versucht, etwas zu programmieren? –
Ich bin ziemlich neu im Coding und verbringe meine Zeit damit, Code-Snippets zusammen zu werfen oder mit einem Front-End-Editor zu arbeiten. Aber ich lerne. Es wäre wahrscheinlich möglich, dies mit etwas Text als svg zu umgehen und jeden einzelnen Buchstaben zu animieren. Aber ich glaube, dass es einen klügeren Weg gibt (wahrscheinlich das, was Maccambridge vorgeschlagen hat). –