Biblioteca creativa y animaciones
Secciones, plantillas de página y animaciones listas para usar y revisadas antes de que pueda emplearlas, y un estudio de animación para su propio movimiento.
Esta página fue traducida del inglés. Si hay alguna diferencia, prevalece la versión en inglés. Leer en inglés
Biblioteca creativa
Sección titulada «Biblioteca creativa»El catálogo abarca siete categorías:
| Categoría | Elementos |
|---|---|
| Héroes (heroes) | 30 |
| Tarjetas | 40 |
| Secciones de contenido | 45 |
| Navegación y estructura | 15 |
| Movimiento | 35 |
| Animación al desplazarse | 25 |
| Plantillas de página | 10 |
Cada elemento supera una lista de revisión (renderizado, diseño adaptable, accesibilidad, licencias y duplicados) antes de aparecer en su Biblioteca con la insignia Approved.
Use un elemento
Sección titulada «Use un elemento»Abra Design → Library y elija un elemento. Preview lo muestra primero. Después:
- Use on a page: elija la Page y haga clic en Add to page. El editor de páginas se abre con las secciones insertadas como cambios sin guardar, listas para editar y guardar.
- Add to website: si su sitio web aún no puede renderizar el elemento, haga clic en Propose the change. Atlas propone un cambio en la configuración del sitio y redacta una Task for the website developer. Su desarrollador añade el componente al código del sitio web; un administrador del sitio activa el cambio en Site setup. Atlas nunca instala código en su sitio web.
- Open in Animations: en los elementos de movimiento, inicie una animación nueva a partir de él.
Estudio de animación
Sección titulada «Estudio de animación»Cree animaciones temporizadas (fundido, desplazamiento, escala, rotación y revelado) para elementos de su sitio web, previsualícelas y conserve cada cambio como una revisión.
-
Abra Design → Animations y haga clic en New animation. Asígnele un Name y una Key, elija desde qué Start from (un fundido de entrada en blanco o una animación aprobada de la biblioteca) y haga clic en Create.
-
En la Timeline, defina la Duration in milliseconds, elija un Element to animate (Title, Image o Button) y use Add track. Añada fotogramas clave y defina Opacity, Move X, Move Y, Scale, Rotate y Reveal para cada uno.
-
Use Play, Pause y Restart, y cambie Preview motion entre Normal y Reduced para comprobar cómo se ve para los visitantes que prefieren menos movimiento.
-
Haga clic en Save new revision. Las revisiones anteriores permanecen en Revisions.
Reprodúzcala en su sitio web
Sección titulada «Reprodúzcala en su sitio web»Su desarrollador marca los elementos que se animarán con data-atlas-motion="title" (o media para la imagen y action para el botón) y reproduce la animación en un componente de cliente. Las líneas de tiempo las sirve la API de entrega en /motion. La tarjeta Add to your website de Studio muestra el código. Producción reproduce la revisión de su lanzamiento en vivo.
Límites. De 80 ms a 60 s por animación, hasta 12 pistas de 24 fotogramas clave. La reproducción comienza cuando su sitio web la invoca; la reproducción activada por el desplazamiento no está integrada.