Kreativ-Bibliothek und Animationen
Fertige Abschnitte, Seitenvorlagen und Animationen, die geprüft werden, bevor Sie sie nutzen können, und ein Animationsstudio für Ihre eigene Bewegung.
Diese Seite wurde aus dem Englischen übersetzt. Bei Abweichungen gilt die englische Version. Auf Englisch lesen
Kreativ-Bibliothek
Abschnitt betitelt „Kreativ-Bibliothek“Der Katalog umfasst sieben Kategorien:
| Kategorie | Elemente |
|---|---|
| Heroes | 30 |
| Karten | 40 |
| Inhaltsabschnitte | 45 |
| Navigation und Rahmen | 15 |
| Bewegung | 35 |
| Scroll-Animation | 25 |
| Seitenvorlagen | 10 |
Jedes Element durchläuft eine Prüfliste (Darstellung, responsives Layout, Barrierefreiheit, Lizenzierung und Duplikate), bevor es mit dem Badge Approved in Ihrer Library erscheint.
Ein Element verwenden
Abschnitt betitelt „Ein Element verwenden“Öffnen Sie Design → Library und wählen Sie ein Element. Preview zeigt es zuerst. Dann:
- Use on a page: Wählen Sie die Page und klicken Sie auf Add to page. Der Seiteneditor öffnet sich mit den eingefügten Abschnitten als ungespeicherte Änderungen, bereit zum Bearbeiten und Speichern.
- Add to website: Kann Ihre Website das Element noch nicht rendern, klicken Sie auf Propose the change. Atlas schlägt eine Änderung der Site-Einrichtung vor und schreibt eine Task for the website developer. Ihr Entwickler fügt die Komponente dem Website-Code hinzu; ein Site-Admin aktiviert die Änderung unter Site setup. Atlas installiert nie Code auf Ihrer Website.
- Open in Animations: Bei Bewegungselementen starten Sie daraus eine neue Animation.
Animationsstudio
Abschnitt betitelt „Animationsstudio“Bauen Sie zeitgesteuerte Animationen (Einblenden, Verschieben, Skalieren, Drehen und Aufdecken) für Elemente Ihrer Website, sehen Sie eine Vorschau und halten Sie jede Änderung als Revision fest.
-
Öffnen Sie Design → Animations und klicken Sie auf New animation. Vergeben Sie einen Name und Key, wählen Sie, womit Sie beginnen (Start from: ein leeres Einblenden oder eine freigegebene Bibliotheksanimation), und klicken Sie auf Create.
-
Legen Sie in der Timeline die Duration in milliseconds fest, wählen Sie ein Element to animate (Title, Image oder Button) und klicken Sie auf Add track. Fügen Sie Keyframes hinzu und setzen Sie jeweils Opacity, Move X, Move Y, Scale, Rotate und Reveal.
-
Nutzen Sie Play, Pause und Restart und stellen Sie Preview motion zwischen Normal und Reduced um, um zu prüfen, wie es für Besucher aussieht, die weniger Bewegung bevorzugen.
-
Klicken Sie auf Save new revision. Frühere Revisionen bleiben unter Revisions.
Auf Ihrer Website abspielen
Abschnitt betitelt „Auf Ihrer Website abspielen“Ihr Entwickler markiert die zu animierenden Elemente mit data-atlas-motion="title" (oder media für das Bild und action für die Schaltfläche) und spielt die Animation in einer Client-Komponente ab. Die Timelines liefert die Delivery API unter /motion. Die Karte Add to your website in Studio zeigt den Code. Production spielt die Revision in ihrem aktiven Release ab.
Limits. 80 ms bis 60 s pro Animation, bis zu 12 Tracks mit je 24 Keyframes. Die Wiedergabe startet, wenn Ihre Website sie aufruft; scrollgesteuerte Wiedergabe ist nicht eingebaut.