Antworten auf deine Fragen:
Neues Thema erstellen

Animation mit Flexbox oder Adobe Animate?

Andimau

Nicht mehr ganz neu hier

Hallo

auf klarmobil.de (weiter unten) ist folgendes animiert:

Versteckte Kosten
Böse Fallen

Meine Frage lautet eigentlich nur, ob es hier eine Art Animationsprogramm für solche Sachen gibt. Bzw. ist hier Adobe Animate geeignet? Oder wäre es sinnvoller und schneller dies über CSS zur realisieren?

Danke :)
Andi
 

Myhar

Hat es drauf

In dem Fall von klarmobil wurde das mit CSS gelöst. Wirklich ein Programm dafür kenne ich nicht, es sind doch meistens keine komplexen Animationen, da kann man die doch auch von Hand schreiben.
Es gibt bestimmt Programme die einem das CSS dafür generieren aber da kenne ich leider keine.
 

Curanai

Aktives Mitglied

Ich schließe mich dem Vorredner an, Andi. Du wirst Dir nur den Aufbau anschauen müssen bei klarmobil.de und wirst sehen, dass es die Klasse "-animation" ist, die das regelt. Ist alles im CSS ersichtlich. Der Ablauf ist straight linear (riecht nach Keyframes also) und die Klasse wird aufgrund offset() nach oben platziert (oder via diesem pseudo-Trick mit "im Viewport sichtbar"). Und unter uns: so wirklich animiert ist es nicht ... es wird nur eingeblendet.
 

DoctorG

Aktives Mitglied

Doch, da gibt es ganz schicke Editoren für. Das macht kein Mensch zu Fuss.

Diese Editoren spucken heute natürlich HTML5, CSS etc. aus und keinen Shockwave- oder Silverlight-Kram mehr. Schlichtweg weil die Browser heute mit HTML5++ hinreichende APIs haben, damit man irgendeine Linie überhaupt auf der Leinwand darstellen kann.

Für die verbreiteten CMS wird dabei der Slider-Ansatz genutzt. Hier mal ein Link zu so einem Plugin auf dem PlugIn-Marktplatz von Envato:
https://layerslider.kreaturamedia.com/?platform=wordpress
Nur ein Beispiel, da gibt es wirklich viele von.
Zwar kennt man Slider meist als so ein Fotografen-Ding, wo eben Bildfolgen durchgenudelt werden. Da das aber jedes dieser Systeme heute schon out-of-the-box kann, sind die Wege um aufzufallen bei den erweiterten Kauf-Lösungen natürlich längst darüber hinaus gegangen.

So ein Slider besetzt heute - beim Einbinden - irgendein Stück Fläche, auf dem Du grafisch ähnlich wie in Adobe Animate oder auch PowerPoint mit Bild-, Vektor-, Video- und Text-Elementen so ziemlich alles auf jede Art bewegen, zerkrümeln etc. kannst, was Du willst.

Im Admin-Bereich bekommst Du grafische Zeitleisten, Events, vorgegebene Verhaltensweisen (damit Du etwa Vibrieren nicht durch millisekundenweises Stückeln auf der Zeitleiste selbst basteln musst) u.v.m. - etwa wie in PowerPoint auch. Natürlich gibt es auch Ebenen - so dass Du grafische Elemente wie diese Balken zum Durchstreichen auch gleichzeitig übereinander setzen kannst.
Beim Speichern entsteht eben nur nicht wie früher eine Datei/ein Kompilat, dass nur ein Fremdkörper-Plugin abspielen kann. Du vergibst lediglich einen Namen und über einen Aufruf dieses Namens an einer Stelle Deiner Wahl, kannst Du diese Animation dann wiedergeben.
Natürlich kannst Du das Ergebnis auch editieren, exportieren (um es etwa in einer anderen Umgebung erneut zu nutzen).
Bei komplexeren Themes - etwa Avada für WordPress - werden gleich mehrere dieser Slider mitgeliefert, einer für eher schnelle Editierungen, einer für 3D-Elemente in Animationen etc. Das ist nicht nur gut (Stichwort Bloatware) - aber man muss ja nicht alles installieren und auch nicht alles mit Gewalt aufrufen. Ich nutze auch nicht jede in Excel eingebaute Formel nur weil ich sie bezahlt habe.

Mit Kosten so um 25 Euro für den Slider oder ca. 60 Euro für ein Theme (... mit deutlich mehr Ausstattung als nur Slidern ... ) ist das nach meiner Einschätzung gut angelegt. Ich kenne zumindest niemanden, der zu Fuss in einer viertel bis halben Stunde ähnliche Animationen so aufbauen kann, dass sie ohne Höllen-Hacks für Office-Nutzer sogar weiter editierbar sind. Und das wäre ja bei 25 Euro - je nach Stundensatz (50 Euro - 80 Euro) - dann ein Zeitwert eines professionellen Dienstleisters. Mit so einem Slider und etwas Erfahrung ist das durchaus möglich (in etwa mit PowerPoint vergleichen - wie lange würde man da brauchen, um zwei Balken quer über einen Text zu legen?). Sollte ich das zu Fuss in purem Code machen, brauche ich dafür einmal unendlich länger oder ich bin entweder abhängig von einem Programmierer wenn ich auch nur den Farbton ändern will oder muss selbst den Code so geschrieben haben, dass auch ich ihn in 6 Monaten noch einmal verstehe und muss ggf. für x Browser Anpassungen ("Browser-Weichen") selbst programmieren.

Tödlich ist dafür natürlich, wenn eine Website keinerlei CMS sondern nur HTML/handgemacht nutzt. Bei CMS installiert man einfach ein Plugin und hat die Funktionalität. Wenn handgemacht, dann muss man diese Einbindungs-Möglichkeit überhaupt erst einmal schaffen - sofern das dann geht. Das Universum der Plugins ist dann nicht mehr überwältigend sondern winzig.
Nicht zuletzt aus solchen Gründen wird klarmobil aber auch jede andere kommerzielle größere Plattform auf Basis irgendeines CMS betrieben.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben