Kleine Letteranimation ohne jQuery

[kaminbausatz]

Ein Beispiel wie man Letteranimationen auch ohne jQuery mit ein paar Zeilen Code realisiert...

https://jsfiddle.net/37w7e1mj/

Kommentare sind erwünscht...

[Arne Drews]

Gefällt mir gut.
Ich würde allerdings die Parameter über eine CSS-Klasse zuweisen, um nicht im HTML die Elemente mit Attributen fluten zu müssen.

Aber sonst, klasse!

[kaminbausatz]

Das habe ich auch überlegt, mit den Klassen habe ich so meine Probleme. Das Ganze wird als JS-Plugin eingebaut. Solange das style scoped Attribut noch nicht vollständig implementiert ist, besteht die Möglichkeit mit meinen Klassen bereits vorhandene Klassen zu überschreiben. Ein eher unwahrscheinliches aber nicht unmögliches Szenario...

[Arne Drews]

Vielleicht wäre es dann ein Ansatz, keine echten CSS-Klassen zu nehmen, sondern ein data-Attribut, wie Du es für die Transition-Parameter ja auch machst?

[kaminbausatz]

Sorry, das verstehe ich jetzt nicht, wie meinst Du das?

[kaminbausatz]

Nachtrag , jetzt habe ich es verstanden, du meinst z.B. data-css='cssrules....' ?

[Arne Drews]

Ja genau, sowas meinte ich...
Dann wäre jetzt bspw. so ein H1-Tag, wie in Deinem Beispiel nicht so zugekleistert mit vielen data- Attributen.

Mir gefällt aber Dein Beispiel an sich sehr gut.
Was dagegen, wenn ich mir das mal als Grundlage kopiere um etwas ähnliches zu adaptieren?

[kaminbausatz]

Was dagegen, wenn ich mir das mal als Grundlage kopiere um etwas ähnliches zu adaptieren?

Nein, evtl. zeigst Du mal was daraus geworden ist... (ach ja, schön wird´s wenn man noch translate(x,y) z.B. -100px , 30px o.ä.) einbaut...

Dein Vorschlag macht die ganz Sache wesentlich kürzer:

https://jsfiddle.net/xcj1m2o1/

[lstegelitz]

Ziemlich geil - darf man das frei verwenden (selbstredend mit Nennung des Autors)?

[kaminbausatz]

Ja, damit das mit den Parametern einfach wird benutze folgendes: http://fhwtools.w4f.eu/

[Arne Drews]

Klasse, danke!

[meta02]

Ja, damit das mit den Parametern einfach wird benutze folgendes: http://fhwtools.w4f.eu/

Die fiddles klappen bei mir leider nicht, Syntax error show.js line 74. -- liegt wohl an mir
das fomular für die paramenter ist der hammer!

[kaminbausatz]

könnte an der Zeile liegen - var elementsToAnimate = document.querySelectorAll('[data-fhwAni'); hier habe ich beim Selector geschlampt und das schließende ']' vergessen...