Bibliothèque créative et animations
Des sections, modèles de pages et animations prêts à l'emploi, relus avant que vous puissiez les utiliser, et un studio d'animation pour vos propres mouvements.
Cette page a été traduite de l'anglais. En cas de divergence, la version anglaise fait foi. Lire en anglais
Bibliothèque créative
Section intitulée « Bibliothèque créative »Le catalogue couvre sept catégories :
| Catégorie | Éléments |
|---|---|
| Héros | 30 |
| Cartes | 40 |
| Sections de contenu | 45 |
| Navigation et éléments d’interface | 15 |
| Mouvement | 35 |
| Animation au défilement | 25 |
| Modèles de pages | 10 |
Chaque élément passe une liste de contrôle de relecture (rendu, mise en page responsive, accessibilité, licences et doublons) avant d’apparaître dans votre Library avec le badge Approved.
Utiliser un élément
Section intitulée « Utiliser un élément »Ouvrez Design → Library et choisissez un élément. Preview l’affiche d’abord. Ensuite :
- Use on a page : choisissez la Page et cliquez sur Add to page. L’éditeur de pages s’ouvre avec les sections insérées sous forme de modifications non enregistrées, prêtes à être modifiées et enregistrées.
- Add to website : si votre site web ne peut pas encore afficher l’élément, cliquez sur Propose the change. Atlas propose une modification de la configuration du site et rédige une Task for the website developer. Votre développeur ajoute le composant au code du site web ; un administrateur du site active la modification sous Site setup. Atlas n’installe jamais de code sur votre site web.
- Open in Animations : pour les éléments de mouvement, démarrez-en une nouvelle animation.
Studio d’animation
Section intitulée « Studio d’animation »Créez des animations chronométrées (fondu, déplacement, mise à l’échelle, rotation et révélation) pour des éléments de votre site web, prévisualisez-les et conservez chaque modification sous forme de révision.
-
Ouvrez Design → Animations et cliquez sur New animation. Donnez-lui un Name et une Key, choisissez de quoi Start from (un fondu enchaîné vierge, ou une animation approuvée de la bibliothèque) et cliquez sur Create.
-
Dans la Timeline, définissez la Duration in milliseconds, choisissez un Element to animate (Title, Image ou Button) et Add track. Ajoutez des images clés et définissez Opacity, Move X, Move Y, Scale, Rotate et Reveal pour chacune.
-
Utilisez Play, Pause et Restart, et faites passer Preview motion de Normal à Reduced pour vérifier le rendu pour les visiteurs qui préfèrent moins de mouvement.
-
Cliquez sur Save new revision. Les révisions antérieures restent sous Revisions.
La jouer sur votre site web
Section intitulée « La jouer sur votre site web »Votre développeur marque les éléments à animer avec data-atlas-motion="title" (ou media pour l’image et action pour le bouton) et joue l’animation dans un composant client. Les timelines sont servies par l’API Delivery à l’adresse /motion. La carte Add to your website de Studio affiche le code. Production joue la révision de sa release live.
Limites. De 80 ms à 60 s par animation, jusqu’à 12 pistes de 24 images clés. La lecture démarre lorsque votre site web l’appelle ; la lecture déclenchée par le défilement n’est pas intégrée.