Ich möchte eine Webseite mit einem zentrierten Wort haben.
Ich möchte, dass dieses Wort mit einer Animation gezeichnet wird, so dass die Seite das Wort auf die gleiche Weise "schreibt", wie wir es tun würden, dh es beginnt an einem Punkt und zeichnet im Laufe der Zeit Linien und Kurven, so dass das Endergebnis eine Glyphe ist.
Es ist mir egal, ob dies mit <canvas>
oder dem DOM gemacht wird, und es ist mir egal, ob es mit JavaScript oder CSS gemacht wird. Das Fehlen von jQuery wäre nett, aber nicht erforderlich.
Wie kann ich das machen? Ich habe gesucht erschöpfend ohne Glück.
javascript
css
canvas
html5-canvas
css-shapes
strugee
quelle
quelle
Antworten:
Canvas-Version
Dadurch werden einzelne Zeichen eher so gezeichnet, als würde man von Hand schreiben. Es wird ein langes Strichmuster verwendet, bei dem die Ein / Aus-Reihenfolge im Laufe der Zeit pro Zeichen vertauscht wird. Es hat auch einen Geschwindigkeitsparameter.
Beispielanimation (siehe Demo unten)
Um den Realismus und das organische Gefühl zu erhöhen, habe ich zufällige Buchstabenabstände, einen y-Delta-Versatz, Transparenz, eine sehr subtile Drehung und schließlich eine bereits "handgeschriebene" Schriftart hinzugefügt. Diese können als dynamische Parameter zusammengefasst werden, um eine breite Palette von "Schreibstilen" bereitzustellen.
Für ein noch realistischeres Aussehen wären die Pfaddaten erforderlich, die nicht standardmäßig vorhanden sind. Dies ist jedoch ein kurzer und effizienter Code, der sich dem handgeschriebenen Verhalten annähert und einfach zu implementieren ist.
Wie es funktioniert
Durch Definieren eines Strichmusters können wir marschierende Ameisen, gepunktete Linien usw. erstellen. Wenn Sie dies ausnutzen, indem Sie einen sehr langen Punkt für den "Aus" -Punkt definieren und den "Ein" -Punkt schrittweise erhöhen, entsteht die Illusion, die Linie beim Streichen zu zeichnen, während Sie die Punktlänge animieren.
Da der Off-Punkt so lang ist, ist das sich wiederholende Muster nicht sichtbar (die Länge hängt von der Größe und den Eigenschaften der verwendeten Schrift ab). Der Pfad des Buchstabens hat eine Länge, daher müssen wir sicherstellen, dass jeder Punkt mindestens diese Länge abdeckt.
Bei Buchstaben, die aus mehr als einem Pfad bestehen (z. B. O, R, P usw.), wie einer für den Umriss, einer für den hohlen Teil, scheinen die Linien gleichzeitig gezeichnet zu sein. Wir können mit dieser Technik nicht viel dagegen tun, da der Zugriff auf jedes Pfadsegment separat ausgeführt werden müsste.
Kompatibilität
Für Browser, die das Canvas-Element nicht unterstützen, kann eine alternative Möglichkeit zum Anzeigen des Texts zwischen den Tags platziert werden, z. B. ein gestalteter Text:
Demo
Dies erzeugt das animierte Live-Stroke-On ( keine Abhängigkeiten ) -
quelle
Bearbeiten Sie 2019
Ich habe eine Javascript-Bibliothek erstellt, mit der realistische Animationen erstellt werden können. Es ist einfach zu bedienen und erfordert eine spezielle JSON-Datei, die als Schriftart fungiert.
Auf der Github-Seite finden Sie Dokumentation und Beispiele. Und Codepen
Vorherige Antwort
Im folgenden Beispiel werden snap.js verwendet, um
tspan
Elemente dynamisch zu erstellen und dann jedes ihrer Elemente zu animierenstroke-dashoffset
.Code-Snippet anzeigen
Vorherige Antwort
Sie können so etwas mit svg's machen
stroke-dasharray
Code-Snippet anzeigen
Ohne
keyframes
Animation können Sie so etwas tunCode-Snippet anzeigen
Und für die IE-Unterstützung können Sie jquery / javascript verwenden
Code-Snippet anzeigen
quelle
$(this).css('fill', 'red')
als Rückruf zur AnimationNur CSS:
quelle
Nach vielen Tests finden Sie hier einige Hinweise. Ziel ist es, schnelle Textdaten auf DOM-Seiten, die Benutzerinteraktionen erfordern , auf die am wenigsten blockierende Weise anzuzeigen .
Es gibt natürlich viele Möglichkeiten, dasselbe zu erreichen. In diesem Beispiel sind die Unterschiede möglicherweise nicht offensichtlich, sondern gelten wirklich für komplexe Schnittstellen.
Am langsamsten :
innerHTML
und Inline-Styling. Das DOM wird bei jeder Iteration neu berechnet. Der Browser arbeitet hart daran, den Zug zu halten. Es wird schnell ausfallen und Speicherlecks verursachen und einfrieren:Viel besser : Die Verwendung
textContent
,requestAnimationFrame
und die Web - Animation api. Dies läuft viel reibungsloser, es ist auf DOM-schweren Seiten offensichtlich. Die Benutzerinteraktionen blockieren die Neulackierungen nicht. Einige Neulackierungen werden möglicherweise übersprungen, damit die Benutzeroberfläche gut reagiert.Im obigen Beispiel wird das DOM immer noch für den Textüberlauf neu berechnet. Wir können sehen, dass der Debugger stark blinkt. Dies ist wirklich wichtig bei kaskadierenden Elementen! Dies kann das Scrollen von Javascript und Benutzern immer noch verlangsamen.
Volle Leistung : Es ist möglich, CSS allein zu verwenden, um die Daten mit der CSS-
content
Regel und den CSS-Variablen zu aktualisieren. Der Text kann dann nicht ausgewählt werden.Meine Tests haben große Verbesserungen gezeigt, die Javascript-Engine überspringt schnell andere Aufgaben. Manchmal beginnt es etwas langsamer als im obigen Beispiel. Abgesehen davon blockiert dies nicht die Schriftrollen der Benutzer, und der Debugger mag auch keine Sprünge mehr.
quelle