Libreria creativa e animazioni
Sezioni, modelli di pagina e animazioni già pronti e verificati prima che possa usarli, e uno studio di animazione per il Suo movimento personalizzato.
Questa pagina è stata tradotta dall'inglese. In caso di differenze, fa fede la versione inglese. Leggi in inglese
Libreria creativa
Sezione intitolata “Libreria creativa”Il catalogo copre sette categorie:
| Categoria | Elementi |
|---|---|
| Hero | 30 |
| Schede | 40 |
| Sezioni di contenuto | 45 |
| Navigazione e struttura | 15 |
| Movimento | 35 |
| Animazione allo scorrimento | 25 |
| Modelli di pagina | 10 |
Ogni elemento supera una checklist di verifica (rendering, layout adattivo, accessibilità, licenze e duplicati) prima di comparire nella Sua Library con il badge Approved.
Usare un elemento
Sezione intitolata “Usare un elemento”Apra Design → Library e scelga un elemento. Preview lo mostra in anteprima. Poi:
- Use on a page: scelga la Page e faccia clic su Add to page. Si apre l’editor di pagina con le sezioni inserite come modifiche non salvate, pronte da modificare e salvare.
- Add to website: se il Suo sito web non può ancora mostrare l’elemento, faccia clic su Propose the change. Atlas propone una modifica della configurazione del sito e scrive un Task for the website developer. Il Suo sviluppatore aggiunge il componente al codice del sito web; un amministratore del sito attiva la modifica in Site setup. Atlas non installa mai codice sul Suo sito web.
- Open in Animations: per gli elementi di movimento, avvia una nuova animazione a partire da essi.
Studio di animazione
Sezione intitolata “Studio di animazione”Crei animazioni temporizzate (dissolvenza, spostamento, scala, rotazione e rivelazione) per gli elementi del Suo sito web, le veda in anteprima e conservi ogni modifica come revisione.
-
Apra Design → Animations e faccia clic su New animation. Gli assegni un Name e una Key, scelga da dove Start from (una dissolvenza in entrata vuota oppure un’animazione approvata della libreria) e faccia clic su Create.
-
Nella Timeline, imposti la Duration in milliseconds, scelga un Element to animate (Title, Image o Button) e usi Add track. Aggiunga i fotogrammi chiave e imposti Opacity, Move X, Move Y, Scale, Rotate e Reveal per ciascuno.
-
Usi Play, Pause e Restart e cambi Preview motion tra Normal e Reduced per verificare l’aspetto per i visitatori che preferiscono meno movimento.
-
Faccia clic su Save new revision. Le revisioni precedenti restano in Revisions.
Riprodurla sul Suo sito web
Sezione intitolata “Riprodurla sul Suo sito web”Il Suo sviluppatore contrassegna gli elementi da animare con data-atlas-motion="title" (oppure media per l’immagine e action per il pulsante) e riproduce l’animazione in un client component. Le timeline sono servite dall’API di consegna a /motion. La scheda Add to your website in Studio mostra il codice. La Produzione riproduce la revisione presente nel proprio rilascio online.
Limiti. Da 80 ms a 60 s per animazione, fino a 12 tracce di 24 fotogrammi chiave. La riproduzione parte quando il Suo sito web la richiama; la riproduzione attivata dallo scorrimento non è integrata.