Ich versuche dynamischen Text auf der Seite scrollen zu lassen. Ich möchte, dass es auf einer gekrümmten und gewinkelten Oberfläche nur für das Design skrollt. Muss ich dafür Flash verwenden? Weil ich lieber nicht.Wie kann ich dynamischen Text auf einer Kurve in HTML/Javascript/CSS scrollen lassen?
Sollten sich die Zeichen mit der Kurve drehen? Die Zeichen eines Textes einem gekrümmten Pfad folgen zu lassen (ohne sich zu drehen) ist mit JavaScript möglich. Wenn der Text sich drehen sollte, könnten Sie es mit VML/SVG/Canvas machen, aber in diesem Fall ist es vielleicht besser, wenn Sie mit Flash arbeiten.
Dies ist nicht genau das, was Sie nach, aber haben einen Blick auf, wie der Text verhält, und Sie werden sehen, was ich meine, von nicht dreht: http://s.blixt.org/physics-enabled-html/
ich eine Idee zu machen etwas, das kann oder nicht sein, was Sie darüber nachgedacht, aber es könnte Ihnen behilflich sein:
es sieht für el wird mit dem Attribut data-path (HTML 5: data-* attributes) analysiert und analysiert, um einen Pfad für die Textbewegung zu erstellen.
ich es auch für die Browser Rotation mit CSS3 aktualisiert und enthält, die es unterstützen (den letzten Mozilla und WebKit-Browsern.)
Nun, Sie jeden einzelnen Buchstaben oder Buchstabenpaar animieren könnte. Es ist machbar, aber es wäre viel effektiver/schneller mit Flash. Sie müssten die Kurve mathematisch darstellen.
Ist es wirklich notwendig? Flashing/Moving Text gilt nicht wirklich als gute Design-Praxis. Natürlich gibt es Ausnahmen.
Edit:
Siehe Anmerkungen für weitere Hinweise auf Lösung.
Ich weiß, dass die Verwendung von Laufschrift kann sehr nervig sein. Aber ich möchte sehen, ob ich es modifizieren kann und es mit dem Rest der Seite gut aussehen lässt. Außerdem ist dieser Lauftext Teil des Hintergrunds/Designs und nicht des Inhalts. – fent
Nun, ich sehe nichts Schlechtes in der Verwendung von JavaScript/HTML, um Animationen zu machen. Ich sage nur, dass es einen Grund gibt, warum so viele Leute animierte Gifs und [blink] Tags deaktivieren =). Meine Antwort ist genau wie die von Blixt. Es ist machbar, würde aber in Flash und JavaScript viel weniger Aufwand erfordern. Sie müssten jedes Zeichen im Text in separaten Elementen aufteilen und jedes davon separat animieren oder Canvas verwenden. Wenn Sie keine Leinwand verwenden, können Sie keine HTML-Elemente drehen (bewegen Sie sie einfach auf X/Y-Achsen), es sei denn, Sie verwenden Level 3 CSS, das noch nicht von allen Browsern unterstützt wird. –
Um sie auch entlang eines Pfades zu bewegen, müssten Sie herausfinden, wie Sie den Pfad mit einer mathematischen Funktion darstellen. Abhängig von der Komplexität des Pfades gibt es verschiedene Ansätze, dies zu tun. Aus Ihrer Frage gehe ich davon aus, dass der Pfad nicht etwas Einfaches wie Kreis ist. Sie können http://en.wikipedia.org/wiki/Polynomial_interpolation und http://en.wikipedia.org/wiki/Spline_(mathematics) ausprobieren, wenn Sie noch nicht genug Hinweise von unseren Antworten auf tatsächlich haben code es, Sie sind wahrscheinlich besser dran mit Flash, wo es nur ein paar Mausklicks, um es zu tun. –
Ich würde es vorziehen, dass der Text rotieren kann. – fent
Wenn Sie sich das obige Beispiel ansehen, sehen Sie, dass es * möglich ist, dass sich Text entlang eines Pfades bewegt und nur mit JavaScript gedreht wird, aber Sie haben keine Rotationsunterstützung für ältere (oder sogar ziemlich neue) Browser. Das Verschieben entlang eines Pfades funktioniert jedoch in allen Browsern. – Blixt
Oh, und wenn Sie so etwas verwenden, würde ich empfehlen, den Pfad in den Interface-bezogenen Teil Ihres JavaScript zu setzen. Der Pfad fügt dem Inhalt keinen Wert hinzu und sollte nicht in den HTML-Code eingefügt werden. Ich habe ihn einfach gemacht, um zu sehen, wie er in allen Browsern funktioniert (und es funktioniert in allen Top-Browsern) .) – Blixt