kostenloser Webspace werbefrei: lima-city


Buchstaben-/Symbol-Transitions

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    funnyweb

    Kostenloser Webspace von funnyweb

    funnyweb hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. g****e

  4. 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.
  5. Autor dieses Themas

    funnyweb

    Kostenloser Webspace von funnyweb

    funnyweb hat kostenlosen Webspace.

    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!
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!