Der Kern der Sache war, dass ich "#grad p" animiert statt "#grad", die Breite auf 800% gesetzt und die Position verschoben wie Du im HTML-Fenster siehst. display:inline-block ist nur, um die Buchstaben nebeneinander anzuordnen, display:flex für #grad wäre wahrscheinlich genau so gut gewesen.
Beiträge von Sempervivum
-
-
Eine Alternative wäre, die PDF-Dateien nicht zu konvertieren sondern direkt anzuzeigen. Ich habe vor einiger Zeit mit pdf.js einen Betrachter geschrieben:
http://webentwicklung.ulrichbangert.de/pdfjs-ajax-2.html
Die doc-Dateien kannst Du ja problemlos nach PDF konvertieren.
-
Das funktioniert nur für den Text, der sich direkt in dem Element befindet, wo auch der Gradient liegt:
https://jsfiddle.net/kuobmwyc/1/
Dieses funktioniert auch, ist aber leider nicht genau das, was Du dir vorstellst:
https://jsfiddle.net/kuobmwyc/2/
Edit: Möglicher Weise so:
-
background ist eine Sammeleigenschaft für alle Hintergrundeigenschaften und schließt clip, position, size etc. ein. Setzt Du nur einen Gradienten werden alle anderen Eigenschaften wie clip gelöscht.
-
Ist ja krass!
Offenbar funktionieren background-clip und text-fill-color nicht in einer Animation. Du kannst aber gezielt den Gradienten ändern, wenn Du background-imgage animierst, dann bleiben die anderen Eigenschaften erhalten:
-
Wenn man Bilder als Hintergrund einbindet, hat man immer Probleme, sie responsiv zu machen, weil sich der Container nicht an ihre Größe anpasst. Ich empfehle, sie besser als img-Elemente einzubinden, dann geht es besser:
https://jsfiddle.net/jf9tu9vh/4/
Noch nicht ganz perfekt, aber ich wollte vor allem demonstrieren, wie man die Bilder ohne Verzerrung responsiv machen kann.
-
Bei deinem fiel mir auf, dass es zunächst mit time=50 flüssig lief, aber dann immer langsamer wurde. In der Console sah man, dass die Ausgaben für die Nase immer mehr wurden, bis zu über 100 auf einmal. Richtig bin ich nicht durchgestiegen, aber ich habe es mal so geändert:
https://jsfiddle.net/Sempervivum/2wjdgL9t/
und dann läuft es mit time=50 dauerhaft flüssig.
-
Um zu demonstrieren, dass die Verwendung einer Bibliothek Vorteile bringt, habe ich die Haare mal mit einer Schleife zum Mund hinzu gefügt und animiert:
https://jsfiddle.net/Sempervivum/xuowurje/18/
Dabei habe ich festgestellt, dass jCanvas doch nicht so das Wahre ist, denn wenn man eine Bezierkurve einmal fest gelegt hat, ist es sehr umständlich, sie zu verändern. Daher bin ich auch von meiner Empfehlung abgewichen, nur ein Canvas zu verwende.
-
Eine Zeitangabe brauchst Du dabei nicht, weil der Browser festlegt, wann die Funktion aufgerufen wird:
https://wiki.selfhtml.org/wiki/JavaScrip…tAnimationFrame
ZitatDer Browser sorgt dafür, dass die Funktion nicht öfter aufgerufen wird, als der Bildschirm das Bild neu zeichnen kann (üblicherweise 60 bis 75 Bilder pro Sekunde).
Die Schnelligkeit stellst Du ein, indem Du die Änderung der Parameter entspr. festlegst.
-
Möglichkeiten zur Optimierung:
- Nur ein Canvas / ein SVG verwenden, Du kannst darin mehrere Objekte zeichnen
- setInterval statt setTimeout verwenden
- oder noch besser: requestAnimationFrame verwenden
- Eine Bibliothek verwenden, die Animationen unterstützt, wie jCanvas für Canvas und svg.js für SVG
-
Mund mit SVG und d3.js:
https://jsfiddle.net/Sempervivum/a19kn68p/Code etwas länger als mit jCanvas aber man braucht viel weniger Punkte aufzunehmen,
-
Siehe hier:
http://wiki.selfhtml.org/wiki/HTML/Mult…_Grafiken/audio
Code<audio src="audio/Intro.mp3" autoplay loop autoplay volume="0.5" > Sorry - Ihre Browser hat keine Unterstützung für dieses Audio-Format. </audio>Heute wird das MP3-Format ausreichend unterstützt:
-
Offenbar gibt es z-index auch bei SVG:
-
Dass man SVG verlustfrei zoomen kann, liegt daran, dass es ein Vektorformat ist, während Canvas Bitmap- bzw. Raster-orientiert ist. Informiere dich darüber.
-
Mund animiert von lachend zu traurig:
-
Für so eine Grafik kannst Du auch SVG sehr gut nehmen. Ich glaube aber kaum, dass das eine oder das andere einfacher ist. SVG hat den Vorteil, dass man es verlustfrei zoomen kann, was bei Canvas nicht der Fall ist.
-
-
Wahrscheinlich meinst Du bei CSS, dass Du etwas animierst. Animieren kannst Du auch mit Canvas, wenn Du eine Bibliothek wie jCanvas verwendest. Dann verhält es sich genau wie bei einer CSS-Animation, dass sich die Form verändert, ohne dass Du die alte löschen musst.
-
Zitat
bei jeden schleife durchlauf zeichne ich ja nur einen dünnen strich,aber irgendwie löscht der code den vorherigen strich nicht
Die vorige Grafik löschen tut er nicht von allein, das musst Du selber tun. Sieh dir die Funktion clearRect().
-
Am einfachsten wäre es, die Schrift in der Grafik mit dem Vorhang einzufügen. Aber auf der anderen Seite doch nicht so einfach, denn dann müsste sie sich den Falten anpassen. Und das Fest ist ja jetzt vorbei.
Posting #1000, danke für den Hinweis!