Auch genannt Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
Ein organischer Blob verändert fortlaufend seine Umrissform.
Einsatz
Hintergründe, Avatare und Buttons
Füge bei [wo] eine „Blob Morph“-Loop-Animation hinzu (auch morphing blob oder animated blob genannt).
Ein organischer Blob soll seine Umrissform langsam und ständig verändern und sich dabei sanft drehen: fließend und weich, ohne scharfe Ecken.
Mach die Schleife nahtlos, damit die Form nie springt, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.
Auch genannt Hamburger to X, Menu Icon Morph, Line-to-Close Icon
Ein Icon wie das Hamburger-Menü verwandelt sich durch drehende und verschobene Balken in ein anderes (X).
Füge bei [wo] einen „Icon Morph“ hinzu (auch hamburger to X oder menu icon morph genannt).
Bei jedem Drücken sollen der obere und untere Balken erst zur Mitte zusammengleiten und sich dann zu einem X drehen, während der mittlere Balken ausblendet; erneutes Drücken kehrt es um: schnell und knackig.
Mach daraus einen echten Umschalt-Button, dessen zugängliches Label und Expanded-Zustand sich mitändern, und halte die Icongröße fest, damit sich drumherum nichts verschiebt.
Ein Wort verschwimmt an derselben Stelle und geht fließend ins nächste über.
Füge bei [wo] einen „Morphing Text“-Effekt hinzu (auch text morph genannt).
Ein Wort soll an derselben Stelle verschwimmen und mit einem weichen, zähflüssigen Übergang ins nächste verschmelzen und dann kurz stillstehen, bevor der nächste Wechsel kommt.
Wechsle die Wörter nahtlos durch, lass Screenreader die Wörter als normalen Text lesen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).
Mit der Maus darüberfahren
Die Ecken des Elements runden sich beim Hovern weich ab.
Füge bei [wo] einen „Round Corners“-Hover-Effekt hinzu.
Die spitzen Ecken des Elements sollen sich weich abrunden, solange der Zeiger darüber ist, und beim Verlassen wieder spitz werden: sanft und schnell.
Lass die Größe des Elements unverändert und zeige denselben Effekt beim Tastaturfokus.