Biblioteca criativa e animações
Seções, templates de página e animações prontos, revisados antes de você poder usá-los, e um estúdio de animação para o seu próprio movimento.
Esta página foi traduzida do inglês. Se houver qualquer diferença, vale a versão em inglês. Ler em inglês
Biblioteca criativa
Seção intitulada “Biblioteca criativa”O catálogo cobre sete categorias:
| Categoria | Itens |
|---|---|
| Heroes | 30 |
| Cards | 40 |
| Seções de conteúdo | 45 |
| Navegação e elementos fixos | 15 |
| Movimento | 35 |
| Animação de rolagem | 25 |
| Templates de página | 10 |
Cada item passa por uma lista de verificação de revisão (renderização, layout responsivo, acessibilidade, licenciamento e duplicados) antes de aparecer na sua Library com o selo Approved.
Use um item
Seção intitulada “Use um item”Abra Design → Library e escolha um item. Preview mostra o item primeiro. Depois:
- Use on a page: escolha a Page e clique em Add to page. O editor de páginas abre com as seções inseridas como alterações não salvas, prontas para editar e salvar.
- Add to website: se o seu site ainda não consegue renderizar o item, clique em Propose the change. O Atlas propõe uma alteração na configuração do site e escreve uma Task for the website developer. O seu desenvolvedor adiciona o componente ao código do site; um administrador do site ativa a alteração em Site setup. O Atlas nunca instala código no seu site.
- Open in Animations: para itens de movimento, inicie uma nova animação a partir dele.
Estúdio de animação
Seção intitulada “Estúdio de animação”Crie animações cronometradas (fade, mover, escalar, girar e revelar) para elementos do seu site, pré-visualize-as e mantenha cada alteração como uma revisão.
-
Abra Design → Animations e clique em New animation. Dê a ela um Name e uma Key, escolha de onde Start from (um fade-in em branco ou uma animação aprovada da biblioteca) e clique em Create.
-
Na Timeline, defina a Duration in milliseconds, escolha um Element to animate (Title, Image ou Button) e use Add track. Adicione keyframes e defina Opacity, Move X, Move Y, Scale, Rotate e Reveal para cada um.
-
Use Play, Pause e Restart, e alterne Preview motion entre Normal e Reduced para ver como fica para visitantes que preferem menos movimento.
-
Clique em Save new revision. As revisões anteriores permanecem em Revisions.
Reproduza no seu site
Seção intitulada “Reproduza no seu site”O seu desenvolvedor marca os elementos a animar com data-atlas-motion="title" (ou media para a imagem e action para o botão) e reproduz a animação em um componente de cliente. As timelines são servidas pela Delivery API em /motion. O cartão Add to your website no Studio mostra o código. O Production reproduz a revisão do seu release no ar.
Limites. De 80 ms a 60 s por animação, até 12 trilhas de 24 keyframes. A reprodução começa quando o seu site a chama; a reprodução acionada por rolagem não está embutida.