Buchstaben-/Symbol-Transitions
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
buchstabe
code
dank
demo
drehen
erreichen
fenster
gutes beispiel
hamburger demo
interessante teil
material design
pfeil
richtigen worte
suche
symbol
tag
umsetzen
url
wunderbaren animationen
-
Hallo,
ich tag/suche">suche seit Tagen im Internet nach einer Lösung, Buchstaben oder Symbole mit JS oder am besten nur CSS ineinander übergehen zu lassen. Ein gutes Beispiel dafür ist Googles »Material Design«, wo in Android-Apps z. B. das Menü-Symbol beim Öffnen des Menüs zu einem Pfeil nach links umanimiert wird (☰ wird zu ←), indem sich Linien verschieben, drehen etc.
Solche wunderbaren Animationen sieht man immer öfter.
Ich suche nach einer Möglichkeit, dasselbe mit Buchstaben zu machen. Leider finde ich scheinbar nicht die richtigen Worte für Google – kennt jemand die richtigen Stichwörter oder sogar eine gute JS-Library?
Vielen Dank und LG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das kann man mit SVG und https://github.com/alexk111/SVG-Morpheus erreichen. Demo: https://alexk111.github.io/SVG-Morpheus/
Liebe Grüße -
Prinzipiell kann man inzwischen auch vieles in CSS umsetzen, so hab ich zum Beispiel vor einiger Zeit speziell das Hamburger Menü, was Du ja konkret angesprochen hast, in (S)CSS umgesetzt, siehe: https://david96.github.io/hamburger-demo/ Eingebunden in eine Seite sieht das dann so aus: https://david96.github.io/ (das Fenster muss weniger breit als hoch sein, damit das Menü hinter dem Icon verschwindet). Den Code dazu gibts hier: https://github.com/David96/david96.github.io/tree/master/hamburger-demo (sass → style.scss ist der interessante Teil) aber generell bist Du wohl mit ggamee's Lösung besser dran, da wesentlich vielseitiger einsetzbar.
-
davidlw schrieb:
Prinzipiell kann man inzwischen auch vieles in CSS umsetzen, so hab ich zum Beispiel vor einiger Zeit speziell das Hamburger Menü, was Du ja konkret angesprochen hast, in (S)CSS umgesetzt, siehe: https://david96.github.io/hamburger-demo/ Eingebunden in eine Seite sieht das dann so aus: https://david96.github.io/ (das Fenster muss weniger breit als hoch sein, damit das Menü hinter dem Icon verschwindet). Den Code dazu gibts hier: https://github.com/David96/david96.github.io/tree/master/hamburger-demo (sass ? style.scss ist der interessante Teil) aber generell bist Du wohl mit ggamee's Lösung besser dran, da wesentlich vielseitiger einsetzbar.
Ist wirklich gelungen, vielen Dank – aber vielleicht zu aufwändig, wenn man das für viele Sachen einzeln machen muss, auch wenn es dann besser aussieht.
ggamee schrieb:
Das kann man mit SVG und https://github.com/alexk111/SVG-Morpheus erreichen. Demo: https://alexk111.github.io/SVG-Morpheus/
Liebe Grüße
Danke Euch beiden! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
