Apprenez à appliquer des effets de défilement d’opacité et de mouvement aux éléments de page dans Adobe Muse.
Adobe Muse n’ajoute plus de nouvelles fonctionnalités et son support cessera le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous aux questions fréquentes (FAQ) consacrées à la fin de service Adobe Muse.
Le panneau Effets de défilement contient quatre onglets différents permettant de contrôler le mouvement, l’opacité, les widgets de diaporama et le contenu Adobe Edge Animate en fonction de la manière dont le visiteur fait défiler une page. Lorsque les effets de défilement sont appliqués en association les uns avec les autres, et lorsque certains éléments sont également épinglés, définis sur une largeur de 100 % et/ou placés au-dessus et en dessous les uns des autres à l’aide du panneau Calques, vous pouvez créer de nombreux effets intéressants.
L’interface du panneau Effets de défilement est similaire à celle du panneau Effets de défilement pour le Fond du navigateur et le Remplissage de l’arrière-plan. Pour appliquer des effets de défilement à un élément de page à l’aide de l’onglet Mouvement du panneau Effets de défilement, procédez comme suit :
Dans l’exemple illustré ci-dessous, la position clé est définie sur 500 pixels. Lorsque le navigateur commence à faire défiler la page, l’élément se déplace vers le bas, à sa position, à une vitesse égale à 1 fois la vitesse de défilement de la page, autrement dit à la même vitesse. L’élément parvient à sa position lorsque la page atteint la position clé. Dès que la page dépasse la position clé, l’élément se déplace vers la droite à une vitesse 2 fois plus élevée que la vitesse de défilement de la page.
Dans cette section, vous allez découvrir comment modifier la visibilité d’une page, en changeant l’affichage d’un élément en fonction des interactions du visiteur lorsqu’il la fait défiler. Vous pouvez en effet afficher et masquer un contenu pour faire en sorte que les éléments semblent apparaître ou disparaître en fondu lorsque le visiteur fait défiler la page vers le bas jusqu’à une nouvelle section. Pour appliquer des effets de défilement qui affectent la transparence d’un élément de page à l’aide de l’onglet Opacité du panneau Effets de défilement, procédez comme suit :
Lorsque l’option Opacité est activée, un autre type de poignée apparaît sur l’élément. Comme avec la poignée en T utilisée pour définir la position clé dans l’onglet Mouvement, vous pouvez cliquer et faire glisser cette poignée pour qu’elle apparaisse au-dessus de l’élément, la faire glisser vers le bas pour l’aligner sur le bord supérieur (ou au-dessus d’une partie de l’élément) ou encore la faire glisser vers le bas au-dessous de l’élément. La poignée Opacité est constituée de trois parties qui peuvent être déplacées indépendamment les unes des autres pour définir les valeurs Position clé, Position de fondu 1 et Position de fondu 2.
si vous le souhaitez, la position clé peut être glissée au niveau des poignées de la position de fondu, pour être définie sur la même valeur. Plutôt que de faire glisser les poignées, vous pouvez également saisir des valeurs numériques pour chacun des champs du panneau Effets de défilement.
Dans cet exemple, l’élément est complètement transparent au début, puis devient plus opaque jusqu’à devenir entièrement opaque (la valeur d’opacité correspondant à la position clé est actuellement définie sur 100 %) lorsque la page atteint la position clé. Dès que la page dépasse la position clé, l’élément redevient progressivement transparent, pour disparaître en fondu lorsque la page va au-delà de 200 pixels .
Le mouvement de défilement permet également très souvent de combiner l’interaction de défilement avec l’affichage des images dans un diaporama. Vous pouvez ajouter un widget de diaporama sur la page puis utiliser l’onglet Diaporama du panneau Effets de défilement pour appliquer les effets de défilement, comme l’affichage automatique d’une nouvelle image dans le diaporama, chaque fois que le visiteur fait défiler la page jusqu’à un emplacement spécifique.
Cliquez sur l’onglet Diaporama (troisième onglet à partir de la gauche) pour vérifier les paramètres de cette section.
Cette partie de l’interface du mouvement de défilement est fréquemment utilisée pour épingler un widget de diaporama sur une page. En règle générale, le widget de diaporama est configuré (à l’aide du menu Options) pour afficher uniquement le plus grand conteneur de diaporama, tout en masquant les vignettes ainsi que les boutons Suivant et Précédent.
Un diaporama plein écran est particulièrement adapté à cet effet, même si le type de widget de diaporama que vous choisirez finalement d’ajouter dépendra de la conception du site.
Pour appliquer les effets de défilement à un widget de diaporama, procédez comme suit :
Après avoir ajouté et configuré le diaporama épinglé, vous pouvez ajouter des effets de défilement.
Dans l’onglet Diaporama du panneau Effets de défilement, activez la case à cocher Diaporama lorsque le widget de diaporama est sélectionné.
Notez que dès que l’option Diaporama est activée, la poignée de la position clé est ajoutée au diaporama en mode Conception. Si vous voulez mettre à jour les valeurs de la position clé de défilement, vous pouvez faire glisser les côtés gauche et droite de la poignée ou saisir des valeurs numériques dans le champ Positions clés de défilement. Vous pouvez également cliquer sur les flèches vers le haut et vers le bas du panneau Effets de défilement pour augmenter ou réduire la valeur numérique.
L’onglet Diaporama du panneau Effets de défilement est une interface à deux boutons offrant deux méthodes de contrôle différentes de la lecture des images d’un diaporama. Vous pouvez définir le diaporama pour qu’il soit automatiquement lu ou pour qu’il avance de manière incrémentielle d’image en image en fonction du défilement de la page.
La première méthode consiste à définir la position clé souhaitée puis à activer la case à cocher Lecture automatique.
Lorsque le visiteur fait défiler la page au-delà de la position clé (ou lorsque le visiteur clique sur un lien dans une balise d’ancrage et accède directement au bas de la page, au-delà de la position clé), la lecture du diaporama débute. La fonction de lecture automatique continue à afficher les images en boucle jusqu’à ce que la page soit repositionnée au-dessus de la position clé ou que le visiteur quitte la page.
Dans l’exemple illustré sur l’image ci-dessous, le diaporama débute lorsque la page défile jusqu’à 100 pixels (ou n’importe où en dessous de ce paramètre de position clé). Si le visiteur revient vers le haut de la page, le diaporama s’arrête lorsque la page dépasse la position clé (99 pixels ou moins).
La deuxième méthode permettant de contrôler le widget de diaporama consiste à définir la position clé et à activer le bouton radio Changer de diapositive tous les. Dans ce flux de travaux, vous définissez également le nombre de pixels dans le champ situé au-dessous du bouton radio, pour indiquer la fréquence à laquelle les images du diaporama avanceront en fonction de la distance parcourue par la page lorsque le visiteur la fait défiler.
Par exemple, vous pouvez épingler un widget de diaporama sur une page plus longue, de sorte qu’il reste à un emplacement fixe lorsque les autres contenus de la page défilent. En définissant une valeur numérique pour l’option Changer de diapositive tous les :, vous pouvez configurer le diaporama pour qu’il passe à l’image suivante chaque fois que la page défile vers le bas du nombre de pixels spécifié.
Dans l’image ci-dessus, la position clé est définie sur 200. Lorsque le visiteur fait défiler la page au-delà de 200 pixels à partir du haut, l’image suivante s’affiche dans le diaporama chaque fois que le visiteur fait défiler la page de 30 pixels supplémentaires.
Adobe Edge Animate est un outil de conception intuitif qui vous permet de créer des animations Web basées sur HTML5. L’interface Edge Animate vous permet de créer des compositions à l’aide de symboles et d’éléments graphiques de mouvement en boucle. Les animations créées à l’aide d’Adobe Edge Animate peuvent être exportées sous forme de fichiers OAM, puis placées sur les pages de vos sites Muse. Les animations créées dans Edge Animate sont lues dans un navigateur sans nécessiter de plug-in.
Lorsque vous créez des animations dans Adobe Edge Animate, vous faites glisser des éléments dans la zone de création et gérez leurs mouvements à l’aide d’un montage. Outre la possibilité d’ajouter des éléments au montage principal, directement, vous pouvez également créer des éléments imbriqués avec des sous-éléments qui sont lus à partir de leurs propres montages internes. Pour en savoir plus sur l’utilisation d’Adobe Edge Animate, consultez la page produit relative à Adobe Edge Animate. Visionnez également les didacticiels vidéo relatifs à Adobe Edge Animate sur Adobe TV.
Pour utiliser la fonction de mouvement de défilement Adobe Edge Animate, la première étape consiste à créer une composition dans ce but. Les effets de défilement peuvent être appliqués aux fichiers OAM afin d’affecter les animations placées sur le montage principal. En concevant stratégiquement l’animation afin que seuls les éléments que vous souhaitez déplacer lors du défilement de la page soient sur le montage principal (et en plaçant tous les autres éléments de l’animation dans des montages de symbole imbriqués), vous pouvez créer des animations interactives. Lorsque les visiteurs font défiler la page, les paramètres d’effets de défilement contrôlent uniquement la lecture des éléments animés sur le montage principal.
Pour plus d’informations sur la création d’animations à ajouter à un site Adobe Muse, voir Contenu Adobe Edge Animate.
Pour utiliser l’onglet Diaporama du panneau Effets de défilement, procédez comme suit :
Dans l'image ci-dessus, la position clé est définie sur 50 pixels. Vous pouvez faire glisser la poignée en T ou saisir une autre valeur dans le champ Position clé pour l’affiner.
Après avoir défini la position clé, vous pouvez contrôler la lecture de l’animation à l’aide de deux options :
tous les objets animés imbriqués ou liés à partir du montage principal dans la composition Adobe Edge Animate ne sont pas affectés par les paramètres d’effets de défilement de mouvement. Par conséquent, vous pouvez choisir d’avoir un arrière-plan statique ou des éléments imbriqués qui bouclent en continu et se déplacent de manière cohérente, quelle que soit l’interaction du visiteur lorsqu’il fait défiler la page.
Accéder à votre compte