Utilisation des effets de défilement dans Adobe Muse

Dans cette section, vous allez découvrir quelques-unes des nombreuses méthodes permettant d’utiliser des effets de défilement pour ajouter des fonctions interactives, une navigation de site unique et des éléments graphiques de mouvement expressifs à vos sites Muse.

Pour commencer, procédez comme suit :

1. Visitez le site exemple en ligne et cliquez sur chaque section pour afficher les exemples pour chaque objectif. Faites défiler chaque exemple de page pour voir comment les effets de défilement contrôlent l’affichage de chaque élément.
2. Faites défiler le site exemple jusqu’au bout pour télécharger le fichier .muse.
3. Ouvrez le site exemple et examinez le projet dans l’espace de travail Muse.
4. Ouvrez le panneau Calques et développez la section Contenu pour voir les éléments utilisés pour créer chaque exemple.

Cet effet permet de faire venir l’un après l’autre un ensemble d’éléments individuels afin de les rassembler dans la conception au fur et à mesure que le visiteur fait défiler la page. Les éléments graphiques et les blocs de texte sont contrôlés à l’aide d’effets de défilement qui créent une compilation interactive, comme si les pièces d’un puzzle se rassemblaient. Il s’agit d’un moyen intéressant de mettre en valeur les détails d’un produit sur une page Web.

Le flux de travaux de cet exemple utilise la section Mouvement initial de l’onglet Mouvement du panneau Effets de défilement pour rassembler les éléments dans une conception consolidée. Après la mise en place de chacun des éléments, les paramètres de la section Mouvement final sont définis sur 0 pour empêcher les éléments déjà en place de se déplacer lorsque de nouveaux éléments viennent s’ajouter à la conception.

Pour créer un effet Elément par élément similaire, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 14 120 pixels.
2. Utilisez l’outil Texte pour créer un bloc de texte et saisissez le texte souhaité.
3. Ouvrez l’onglet Mouvement du panneau Effets de défilement et activez la case à cocher Mouvement. Dans cet exemple, les paramètres de la section Mouvement initial entraînent le déplacement du bloc de texte vers le bas, à sa place, à une vitesse égale à 0,25 fois (un quart) la vitesse du défilement. Lorsque la page atteint la position clé associée au bloc de texte, celui-ci atteint la place qu’il occupe en mode Conception. Ensuite, grâce aux paramètres de la section Mouvement initial, qui sont définis sur 0 pour les deux directions, le premier élément reste à sa place, comme s’il était épinglé.
4. Un fichier PNG doté d’une transparence (le contour d’un téléphone portable) est placé au-dessous du bloc de texte. Cet élément utilise les paramètres de l’onglet Mouvement du panneau Effets de défilement pour arriver du côté gauche de la page, se mettre en place, puis y rester.
5. Juste après le contour du téléphone, un élément blanc, plus petit, suit le même type de mouvement, en arrivant du côté gauche de la page puis en restant à sa place. Cet élément graphique blanc représente l’écouteur situé en haut d’un téléphone portable. Ce fichier (appelé phone-earpiece.png) est placé au-dessus du contour de téléphone portable dans le panneau Calques, et s’affiche ainsi au-dessus du contour de téléphone dans la conception. 
6. Juste après l’écouteur, un petit élément blanc représentant le bouton Accueil du téléphone arrive du côté droit en s’intégrant de la même manière que l’écouteur et s’affiche au-dessus du contour du téléphone portable dans la conception.
7. Ensuite, un élément graphique rectangulaire légèrement coloré avec un dégradé subtil qui passe verticalement du blanc au gris clair utilise l’onglet Mouvement du panneau Effets de défilement pour se positionner, et se glisser parfaitement dans la partie centrale transparente du contour du téléphone portable. Une fois en position, il reste en place, simulant l’apparence de l’écran du téléphone. L’élément « écran » (phone-screen.png) est placé au bas du panneau Calques, afin d’apparaître derrière tous les autres éléments sur la conception.
8. Quatre rectangles (remplis de couleurs unies : bleu, vert, jaune et rouge) se mettent ensuite en place. Pour créer l’effet d’éléments qui volent pour se rassembler, chacun des rectangles se voit attribuer des vitesses et des directions différentes dans l’onglet Mouvement du panneau Effets de défilement. Le rectangle bleu se déplace vers le bas et vers la droite, les rectangles vert et jaune se déplacent vers le haut et vers la droite et le rectangle rouge se déplace vers le haut et vers la gauche dans les sections Mouvement initial. Dans la section Mouvement final, tous les rectangles ont pour valeur 0 dans les deux directions. Ainsi, chaque élément se comporte comme s’il était épinglé dès qu’il arrive à sa destination finale au-dessus de l’écran du téléphone portable.
9. Une fois tous les autres éléments assemblés, un deuxième champ de texte se déplace vers le haut pour se positionner sous le premier champ de texte, et ce à une vitesse égale à 0,5 fois (la moitié) la vitesse de défilement de la page.

Enfin, deux derniers éléments se placent en bas : un rectangle uni rempli de la même couleur unie que la page (le rendant invisible dans la conception) et un groupe d’objets (un rectangle jaune avec un élément graphique représentant une ampoule) dernière lui.

Le rectangle de couleur unie permet de masquer le groupe, qui est placé derrière lui.

10. Le rectangle est essentiellement épinglé à sa place et ne se déplace jamais, car toutes les valeurs des sections Mouvement initial et Mouvement final sont définies sur 0. Lorsque la page atteint la position clé du groupe contenant l’illustration représentant une ampoule, celui-ci se déplace vers la gauche, devenant ainsi visible car n’étant plus masqué par le rectangle au-dessus. Le groupe représentant une ampoule est superposé au-dessus de l’élément écran du téléphone portable mais au-dessous du contour du téléphone portable. Ainsi, l’illustration représentant une ampoule semble glisser à sa place (comme un écran de téléphone portable réel qui glisse lorsqu’il est effleuré horizontalement). Le groupe représentant une ampoule couvre le rectangle de couleur dégradée qui, précédemment, représentait l’écran du téléphone.

Comme vous pouvez le constater dans cet exemple simple, vous pouvez combiner une page de grande taille et une série d’éléments superposés de manière stratégique dans le panneau Calques, et utiliser l’onglet Mouvement du panneau Effets de défilement pour créer l’illusion d’un rassemblement d’éléments dans une animation lorsque le visiteur fait défiler la page.

L’effet Menu coulissant utilise de nombreuses conventions déjà décrites dans l’effet Elément par élément. Les éléments semblent voler lorsque vous utilisez l’onglet Mouvement du panneau Effets de défilement, et les rectangles masquent certains éléments jusqu’à ce qu’ils puissent apparaître dans la conception.

Cet exemple utilise des groupes de rectangles positionnés de manière stratégique afin de créer un effet de conception angulaire complexe.

Affichez le site exemple dans un navigateur pour voir l’avion voler horizontalement à travers la page, de droite à gauche, suivi d’un ensemble d’options de menu stylisées et d’un arrière-plan dégradé avec des rayures diagonales.

Pour créer un effet de coulissement similaire, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 4 665 pixels.
2. L’image d’avion est superposée au-dessus de tous les autres contenus de la page, et s’affiche donc en haut de la liste dans le panneau Calques. Elle est définie pour se déplacer vers la gauche avant et après sa position clé dans l’onglet Mouvement du panneau Effets de défilement.
   

3. Quatre blocs de texte sont configurés pour arriver par la gauche et s’empiler verticalement pour créer le menu de navigation. Dans l’onglet Mouvement du panneau Effets de défilement, chaque bloc de texte se déplace à la même vitesse (1,25 fois la vitesse de défilement) dans la section Mouvement initial. Chaque bloc de texte est également associé à une position clé distincte. Lorsque le visiteur fait défiler la page vers le bas, chaque bloc de texte se glisse en position, en venant s’aligner sur le côté gauche de la conception. Tous les blocs de texte affichent les valeurs 0,0 dans la section Mouvement final, entraînant l’immobilité des éléments de menu dès qu’ils sont en position.
4. Les blocs de texte sont remplis d’une couleur d’arrière-plan unie, même si, au premier regard, ils ressemblent à des images car ils sont coupés en diagonale sur le côté, plutôt que de se terminer à la verticale. Cet effet est créé par la superposition d’un groupe de trois rectangles sur les blocs de texte, qui sont remplis avec la même couleur unie que la couleur de fond du navigateur.

5. L’animation des blocs de texte est initialement masquée par un autre groupe de rectangles, car les blocs de texte sont placés sous le groupe dans le panneau Calques. Le groupe est une combinaison de trois rectangles : un rectangle plus grand avec un dégradé vertical et deux autres rectangles plus petits (un carré et un pivoté) remplis d’une couleur unie qui correspond à la première couleur du dégradé.

6. Si vous faites défiler la page jusqu’au bas du groupe, vous observerez une série de quatre rectangles supplémentaires, de différentes largeurs, qui pivotent et s’alignent au-dessus de l’angle inférieur droit du rectangle dégradé supérieur.
   

Les groupes sont très utiles pour associer des éléments et les manipuler comme un objet unique. Dans cet exemple, des effets de défilement de mouvement sont appliqués à des groupes de différents rectangles pour que chaque groupe se déplace comme une entité unique.

Cet exemple illustre également l’utilisation créative d’un espace négatif. Si le fond du navigateur est rempli d’une couleur d’arrière-plan unie, vous pouvez effectuer de nombreux effets de découpe intéressants en superposant des rectangles remplis de la même couleur au-dessus des autres rectangles. Plutôt que de créer des éléments graphiques à l’aide d’un programme de retouche d’images et de les importer vers une seule image, vous pouvez utiliser des rectangles pour créer des éléments graphiques au sein de l’espace de travail Muse.

Cet exemple de lever et coucher de soleil animés est obtenu par une combinaison de deux effets de défilement : mouvement et opacité. Cet exemple affiche un arrière-plan de page rempli d’une couleur dégradée avec une seule image de soleil positionnée, au format PNG. L’image PNG inclut des zones transparentes qui permettent à la couleur de l’arrière-plan de la page d’apparaître au travers.

Visionnez le site exemple dans un navigateur afin de voir comment le soleil passe peu à peu à une transparence de 100 % lorsqu’il se déplace sur la page. A son apogée, le soleil est totalement opaque, mais lorsque vous continuez à faire défiler la page vers le bas, il se couche et redevient de plus en plus transparent jusqu’à disparaître.
Pour créer un effet de fondu similaire, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur plus élevée que la valeur moyenne des moniteurs, pour permettre le défilement de la page. Dans le site exemple, la hauteur minimale de la page est définie sur 2 988 pixels.
2. L’image du soleil est placée au centre de la page. Dans l’onglet Mouvement du panneau Effets de défilement, la position clé est définie sur 1 410 pixels. Notez également les paramètres des sections Mouvement initial et Mouvement final.

Ces paramètres permettent au soleil de suivre une trajectoire semi-circulaire, débutant l’arc de cercle en bas à gauche de la page, pour le terminer en bas à droite de la page, en passant par le centre haut de page (la position clé).

3. Alors que le soleil est toujours sélectionné, cliquez sur l’onglet Opacité pour afficher ses paramètres. La valeur Position de fondu 1 est définie sur 726 pixels (au-dessus du soleil). La valeur Position de fondu 2 est définie sur 1 925 pixels (au-dessous du soleil). Le soleil débute avec une opacité de 0 % (totalement transparent), puis devient entièrement opaque au fur et à mesure que le visiteur fait défiler la page jusqu’à sa position clé. Lorsque le visiteur fait défiler la page vers le bas, au-delà de la position clé du soleil, l’opacité passe de 100 % à 0 %, afin de créer l’effet d’apparition et de disparition en fondu.
   

4. Testez la page en sélectionnant Fichier > Prévisualiser la page dans le navigateur. Faites défiler la page pour voir le soleil se lever en apparaissant en fondu, puis se coucher dans l’angle inférieur droit en disparaissant en fondu.
5. Fermez le navigateur et revenez à l’espace de travail Muse.

Cet exemple illustre comment contrôler des fichiers OAM exportés depuis Adobe Edge Animate à l’aide des effets de défilement. Dans cet exemple, la page est remplie d’un dégradé vertical qui débute par un bleu turquoise pour se terminer par un bleu foncé.

Une combinaison de paramètres appliqués dans les onglets Mouvement et Edge Animate crée cet effet animé.

Trois occurrences d’un même fichier OAM sont importées côte à côte, horizontalement, pour créer une ligne de boussoles animées. Lorsque vous affichez le site exemple dans un navigateur, les trois boussoles arrivent sur l’écran par le bas, puis restent en position. Chacune des trois boussoles semble tourner à différentes vitesses, mais cet effet est dû aux paramètres du panneau Effets de défilement qui les font tourner à différentes vitesses, et non à la création d’un fichier Edge Animate.

Pour créer un effet similaire avec trois fichiers OAM importés, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 7 465 pixels.
2. Sélectionnez les trois occurrences de boussole sur la page. Dans l’onglet Mouvement du panneau Effets de défilement, vous pouvez voir que les trois fichiers OAM possèdent les mêmes paramètres de mouvement et de position clé, car toutes les valeurs sont affichées.

Si vous visionnez le site exemple dans un navigateur, vous verrez les trois éléments OAM apparaître simultanément sur l’écran, puis rester en ligne comme s’ils étaient épinglés.

3. Cliquez en dehors des boussoles pour les désélectionner toutes les trois, puis sélectionnez uniquement la boussole de gauche. Maintenez la touche Maj enfoncée tout en sélectionnant la boussole sur la droite, de sorte que les deux boussoles soient sélectionnées. Ouvrez l’onglet Edge Animate du panneau Effets de défilement pour vérifier les paramètres.

Ces deux boussoles sont configurées pour suivre en boucle l’animation de montage et passer à l’image suivante chaque fois que le visiteur fait défiler la page de 350 pixels vers le bas.

4. Désélectionnez les deux boussoles extérieures. Sélectionnez la boussole centrale et observez à nouveau l’onglet Edge Animate pour vérifier que le champ Changer l’image tous les est défini sur 400 pixels. Ce paramétrage permettra à l’animation centrale de se déplacer plus lentement par rapport aux deux boussoles extérieures.

Vous pouvez créer des effets d’animation intéressants en faisant varier la vitesse de plusieurs animations Edge Animate importées, par rapport à la vitesse de défilement de la page. Par exemple, vous pouvez créer un banc de poissons, un ciel rempli de nuages qui se déplacent ou d’autres effets en ajoutant plusieurs itérations du même fichier OAM avec différents paramètres d’effet de défilement.

Vous pouvez contrôler l’affichage des images dans un widget de diaporama selon la manière dont le visiteur fait défiler la page. Pour ce faire, vous devrez ajouter un widget de diaporama sur une page, puis utiliser l’onglet Diaporama du panneau Effets de défilement pour actualiser les options du diaporama.

Dans cet exemple, le diaporama contient une série d’images qui crée une vue pivotante de 360 degrés d’un sac à dos. Vous pouvez obtenir des images de diaporama similaires en installant un trépied et en prenant en photo un objet placé sur un support pivotant. Cet effet est très utile pour afficher une description interactive d’un produit et permettre aux clients potentiels de voir un article sous tous les angles avant de l’acheter.

Pour créer un effet similaire à l’aide d’un widget de diaporama, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 7 465 pixels.
2. Un bloc de texte avec le mot Superpack est configuré pour utiliser des effets de défilement. Dans l’onglet Mouvement, configurez les paramètres de la section Mouvement initial pour que le texte arrive sur l’écran de la gauche vers la droite, à la même vitesse de défilement que la page. Dans les paramètres de la section Mouvement final, les deux directions sont définies sur 0, de sorte que le bloc de texte reste en place comme s’il avait été épinglé sur la page.
   

3. Ouvrez la bibliothèque de widgets et faites glisser un widget de diaporama au centre de la page, à droite de l’emplacement final du bloc de texte.
4. Utilisez l’option Ajouter des images du menu Options pour sélectionner les fichiers d’images composant le diaporama. 

Alors que le diaporama est sélectionné, vous pouvez sélectionner le widget Diaporama et utiliser l’interface Epingler du panneau de configuration pour épingler le diaporama à l’emplacement souhaité. Vous pouvez également effectuer un test en ajoutant un widget de diaporama plein écran et en le contrôlant à l’aide d’effets de défilement. 

5. Alors que le diaporama est sélectionné, ouvrez l’onglet Diaporama du panneau Effets de défilement et activez la case à cocher Diaporama.
6. Faites glisser la poignée en T ou entrez une valeur dans le champ correspondant pour définir la position clé. Dans cet exemple, la position clé est définie sur 1 066 pixels.
7. Activez le bouton radio Changer de diapositive tous les : et définissez le champ situé au-dessous sur 50 pixels.
   

8. Testez la page à l’aide de l’option Aperçu ou dans un navigateur. Faites défiler la page vers le bas pour voir le sac à dos tourner sur lui-même. Vous pouvez également créer des images qui semblent s’envoler (vers le haut) ou tomber (vers le bas), en ajoutant au diaporama des fichiers d’images légèrement différents, comme les images d’un fichier GIF animé.
9. Après avoir testé les effets de défilement, revenez au mode Conception dans Muse pour poursuivre l’édition des pages.
   

Grâce aux effets de défilement, vous pouvez créer une très longue page divisée en sections avec des aspects radicalement différents. Lorsque le visiteur fait défiler la page vers le bas, il passe d’une section à l’autre, et les sections semblent se dérouler, avec des effets de texte animé et des bordures de séparation créées à l’aide d’un effet d’ombre.

Vous pouvez utiliser des balises d’ancrage ou ajouter simplement une note pour encourager les visiteurs à faire défiler la page vers le bas afin de visualiser chacune des sections. Lorsque vous êtes en bas du site exemple et que vous cliquez sur le bouton Haut de la page, vous verrez toute la page défiler alors que la balise d’ancrage se repositionne en haut de la conception.

Pour créer un effet de déroulement similaire, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 16 990 pixels.
2. Dans le menu Fond du navigateur, définissez la couleur de l’arrière-plan du navigateur sur un bleu uni.

3. Alors que toute la page est sélectionnée, utilisez le menu Fond pour définir la couleur de la page sur Sans, de sorte que la couleur bleu du fond du navigateur apparaisse au travers.
4. Faites défiler la page à environ 2 248 pixels du haut. Utilisez l’outil Rectangle pour dessiner un rectangle de 3 000 pixels de large et 2 000 pixels de haut. Utilisez l’outil Sélection pour centrer le rectangle sur la page, avec les deux côtés s’étendant au-delà des côtés de la fenêtre du navigateur.
5. Alors que le rectangle est toujours sélectionné, utilisez le menu Fond pour définir la couleur du fond sur un vert uni. Utilisez le menu Effets pour définir un effet d’ombre.

6. Alors que le rectangle vert est sélectionné, activez la case à cocher Mouvement dans l’onglet Mouvement du panneau Effets de défilement. Cliquez sur la poignée en T, puis faites-la glisser jusqu’à la position clé qui est définie sur le bord supérieur du rectangle, soit à 2 248 pixels dans le site exemple.

7. Dans la section Mouvement initial, définissez le rectangle pour qu’il se déplace vers le bas à une vitesse 1,5 fois plus élevée que la vitesse de défilement. Définissez toutes les autres directions sur 0.
8. Utilisez l’outil Texte pour créer un champ de texte vers le haut du rectangle vert. Dans cet exemple, le champ de texte contient la phrase suivante : This is the roll-up (Ceci est l’effet de déroulement). Vous pouvez toutefois saisir le contenu de votre choix, et appliquer la mise en forme que vous préférez.
9. Alors que le bloc de texte est sélectionné, activez l’onglet Mouvement du panneau Effets de défilement. Faites glisser la poignée en T pour l’aligner sur le bord supérieur du rectangle vert et mettre à jour les paramètres afin de contrôler l’affichage du bloc de texte en fonction du défilement de la page.

10. Définissez la direction vers le bas de la section Mouvement initial pour que le bloc de texte se déplace à une vitesse égale à 1,5 fois la vitesse de défilement. Définissez toutes les autres valeurs du panneau sur 0. Ainsi, le champ de texte se déplace vers le bas, dans la même direction et à la même vitesse que le rectangle vert. Le rectangle et le bloc de texte restent en place lorsque le visiteur fait défiler la page au-delà de leurs positions clés.
11. Si vous cliquez sur Aperçu, vous pouvez faire défiler la page vers le bas et voir comment le rectangle vert et le champ de texte arrivent sur l’écran par le haut. Une fois le test terminé, cliquez sur Conception pour poursuivre l’édition de la page.
12. Utilisez le menu Affichage pour effectuer un zoom arrière jusqu’à 10 % de la conception du site. Sélectionnez le rectangle vert et le champ de texte. Maintenez la touche Option/Alt enfoncée tout en faisant glisser les deux éléments plus vers le bas de la page, pour les dupliquer. Définissez la couleur de remplissage du rectangle dupliqué sur bleu foncé et utilisez l’outil Texte pour mettre à jour le contenu textuel.

Dans cet exemple, le bloc de texte dupliqué contient la phrase suivante : Use it to drastically alter the appearance of your website (Utilisez-le pour modifier radicalement l’aspect de votre site Web). Vous pouvez toutefois saisir le texte de votre choix pour identifier la section bleu foncé de la page.

13. A l’aide de l’outil Sélection, positionnez le rectangle et le bloc de texte dupliqués à environ 5 448 pixels du haut de la page.
14. Alors que le rectangle bleu foncé est sélectionné, examinez l’onglet Mouvement du panneau Effets de défilement. La position clé a été automatiquement mise à jour avec le nouvel emplacement du rectangle (5 448 px) et dans la section Mouvement initial, la direction verticale est toujours définie pour que le rectangle se déplace à une vitesse égale à 1,5 fois la vitesse de défilement (et toutes les autres valeurs sont définies sur 0). Si vous observez le champ de texte dupliqué, vous constaterez que les effets de défilement sont également conservés pour l’élément dupliqué.
15. Répétez quatre fois les étapes 12 et 13 afin de créer six grands rectangles différents au total, avec des champs de texte au-dessus. L’effet d’ombre et les paramètres d’effet de défilement sont déjà appliqués à chacun de ces rectangles. Placez les quatre derniers rectangles aux positions clés suivantes : 8 648 pixels, 11 852 pixels, 15 058 pixels et 18 251 pixels, afin que chaque section soit séparée par 1 200 pixels environ.
16. Utilisez le menu Fond pour définir la couleur de remplissage des rectangles et leur appliquer différentes couleurs. Faites des tests en appliquant des fonds de couleur unie et dégradée afin que chaque section se distingue et contraste avec les autres sections.
17. Utilisez l’outil Texte pour mettre à jour le contenu textuel de chaque section. Vous pouvez, par exemple, modifier chaque texte pour qu’il indique la couleur de fond du rectangle qui vient ensuite, comme suit : Voici la section bleue.
18. Testez la page en sélectionnant Fichier > Prévisualiser la page dans le navigateur. Faites défiler la page pour voir les différentes sections de la page apparaître, puis être remplacées par la section suivante.
19. Fermez le navigateur et revenez à l’espace de travail Muse.
    

Vous pouvez créer des conceptions typographiques originales à l’aide d’une combinaison d’effets de défilement de mouvement et de polices Web Adobe Edge. Les polices Web vous permettent de personnaliser le style du texte à l’aide d’une large gamme de polices chargée lors de l’ouverture de la page. Plutôt que d’importer et d’animer des images textuelles créées à l’aide d’un programme de retouche d’images, vous pouvez créer de magnifiques pages plus faciles à mettre à jour à l’aide des polices Web Edge. Et les effets de défilement créent une animation spectaculaire lorsque le visiteur fait défiler la page.

Pour créer un effet similaire avec un texte dynamique, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 4 854 pixels.
2. Définissez la couleur de fond de la page sur Sans. La couleur de fond du navigateur n’a aucune importance, car la page sera recouverte par un grand rectangle à l’étape suivante.
3. Utilisez l’outil Rectangle pour dessiner un grand rectangle de 1 159 pixels de large sur 4 854 pixels de haut, environ. Utilisez le menu Fond pour remplir le rectangle d’une couleur unie ou dégradée. Dans cet exemple, une couleur dégradée allant du bleu canard au rose fuchsia est appliquée comme couleur d’arrière-plan. Utilisez l’outil Sélection pour centrer le rectangle afin qu’il occupe toute la zone du navigateur. Vous pouvez, si vous le souhaitez, effectuer un zoom arrière pour vous assurer que le rectangle est centré sur la page.

4. Une fois le rectangle centré, redéfinissez le zoom sur 100 % dans le menu Affichage.
5. Sur le côté gauche de la page, utilisez l’outil Texte pour créer une série de blocs de texte. Dans cet exemple, il y a cinq blocs de texte au total. Le contenu de chaque bloc de texte est indiqué ci-dessous, mais n’hésitez pas à saisir le texte de votre choix dans chaque bloc de texte :
   • Five Frames (5 images)
   • Scrolling (Se déplaçant)
   • At Different Speeds Will (A différentes vitesses)
   • Create (Créeront)
   • Dynamic Tension (Une tension dynamique)

Vous pouvez, si vous le souhaitez, dupliquer certains blocs de texte, puis leur appliquer un style légèrement différent. Dans cet exemple, le bloc de texte contenant le mot Create (Créeront) a été dupliqué, puis les deux itérations superposées l’une sur l’autre afin de créer un effet d’ombre portée de couleur bleue claire.

6. Utilisez l’outil Texte pour sélectionner chacun des blocs de texte. Utilisez le panneau Texte (ou les options de mise en forme du texte du panneau de configuration) pour appliquer différentes polices Web, tailles de police, couleurs, ainsi que d’autres paramètres de typographie afin que les blocs de texte se distinguent les uns des autres.
7. Sélectionnez tous les blocs de texte. Alors qu’ils sont sélectionnés, ouvrez l’onglet Mouvement du panneau Effets de défilement. Entrez la même valeur numérique pour définir simultanément la position clé de tous les blocs de texte sélectionnés. (Dans cet exemple, la position clé est définie sur 1 372 pixels.) Définissez également la direction horizontale des sections Mouvement initial et Mouvement final sur la droite. Définissez toutes les directions verticales des sections Mouvement initial et Mouvement final sur 0 afin que les blocs de texte ne se déplacent pas verticalement.
8. Cliquez à l’extérieur des blocs de texte, puis cliquez sur chaque bloc de texte, individuellement. Entrez des valeurs légèrement différentes pour chaque bloc de texte. Dans la liste ci-dessous, la première valeur correspond à la vitesse du mouvement initial et la seconde valeur à la vitesse du mouvement final pour la direction horizontale (vers la droite) :
   • 5 images : 0,9x, 0,1x
   • Se déplaçant : 0,12x, 0,5x
   • A différentes vitesses : 0,7x, 0,17x
   • Créeront : 1,1x, 0,005x
   • Une tension dynamique : 1x, 0,01x
     

9. Utilisez l’outil Texte pour créer un champ de texte, puis saisissez le chiffre 5 sur le côté droit de la page. Une fois encore, vous pouvez choisir de dupliquer le bloc de texte, puis d’appliquer différentes couleurs et mises en forme pour donner l’illusion de bords biseautés et d’ombres portées. Si vous créez des copies d’un bloc de texte à des fins de conception, regroupez les blocs de texte afin de pouvoir appliquer des effets de défilement au groupe.
10. Alors que le champ de texte contenant le chiffre 5 est sélectionné, activez la case à cocher Mouvement de l’onglet Mouvement du panneau Effets de défilement. Définissez la position clé en saisissant une valeur numérique ou en faisant glisser la poignée en T (dans cet exemple, la position clé est définie sur 1 425 px). Dans la section Mouvement initial, configurez l’élément afin qu’il se déplace vers la gauche à une vitesse égale à 1 fois la vitesse de défilement. Dans la section Mouvement final, configurez l’élément pour qu’il se déplace vers la gauche à une vitesse égale à 0,01 fois la vitesse de défilement.
11. Testez la page en sélectionnant Fichier > Prévisualiser la page dans le navigateur. Faites défiler la page pour voir les cinq blocs de texte arriver sur la page depuis la gauche alors que le bloc de texte contenant le chiffre 5 arrive de la droite. Faites défiler la page vers le bas, puis vers le haut pour voir les blocs de texte s’animer.
12. Fermez le navigateur et revenez à l’espace de travail Muse.
     

Vous pouvez créer une navigation interactive et attrayante du site à l’aide d’effets de défilement, afin que les différents boutons arrivent dans la zone visible de la page, puis s’alignent pour créer une barre de menus. Dans cet exemple, quatre boutons de survol se déplacent du bas vers le haut de la page, alors que le visiteur la fait défiler, et se mettent en place afin de créer une barre de menus verticale.

Une fois les quatre boutons alignés, le contenu de l’arrière-plan (composé d’une illustration d’ampoule, d’une zone d’arrière-plan colorée, d’un bloc de texte et de rayures d’angle diagonales) arrive de part et d’autre de la page afin de créer une section du site.

Bien que les boutons ne soient pas liés dans cet exemple, vous pouvez, si vous le souhaitez, ajouter des liens à l’aide du menu déroulant Hyperliens. Les visiteurs peuvent alors activer ces hyperliens pour charger une nouvelle page ou utiliser des balises d’ancrage afin d’accéder directement à une autre section de la page en cours.

Pour créer un effet de menu empilé similaire, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 7 465 pixels.
2. Définissez la couleur de fond de la page sur Sans et définissez le fond du navigateur sur une couleur d’arrière-plan unie. Dans le site exemple, la couleur de fond du navigateur est définie sur une couleur beige clair.
3. Utilisez l’outil Texte pour créer un bloc de texte. Saisissez le mot Home (Accueil). Utilisez les options de mise en forme du panneau de configuration pour ajouter une couleur d’arrière-plan au bloc de texte. Mettez également à jour les options de mise en forme pour personnaliser le style du texte comme vous le souhaitez. Utilisez les poignées situées sur les côtés du bouton pour l’étirer de 300 pixels en largeur et 115 pixels en hauteur, environ.

4. Ouvrez le panneau Etats. Sélectionnez l’état Survol et ajoutez une couleur de fond différente (ou personnalisez son style comme vous le souhaitez) pour créer un bouton de survol.

5. Une fois l’état Survol mis à jour, sélectionnez à nouveau l’état Normal.
6. Ouvrez l’onglet Mouvement du panneau Effets de défilement. Alors que le bouton est sélectionné, activez la case à cocher Mouvement. Définissez la position clé en faisant glisser la poignée en T ou en saisissant une valeur numérique. Définissez également la section Mouvement initial pour configurer un déplacement à une vitesse égale à 0,75 fois la vitesse de défilement. Laissez tous les autres champs définis sur 0.

7. Maintenez la touche Option/Alt enfoncée tout en faisant glisser le bouton Home (Accueil) plus vers le bas de la page. Vous obtenez ainsi une copie du bouton. Assurez-vous que la copie est verticalement alignée avec le bouton Home (Accueil) d’origine. Alors que les deux éléments sont alignés et que la copie est toujours sélectionnée, un repère bleu foncé s’affiche temporairement au centre.

8. Placez le bouton dupliqué en bas de la page, à environ 460 pixels au-dessous du bouton d’origine.
9. Répétez les étapes 7 et 8 pour dupliquer le bouton à deux nouvelles reprises, afin d’obtenir un total de quatre boutons, régulièrement espacés sur la page. Utilisez l’outil Texte pour modifier les deuxième, troisième et quatrième boutons à partir du haut, afin de mettre à jour le contenu textuel avec ces libellés : Products (Produits), Photos, Contact Us (Contact).

Lorsque vous avez dupliqué le premier bouton Home (Accueil), vous avez copié le style du bloc de texte et de son contenu, ainsi que les paramètres d’effets de défilement. Si vous sélectionnez l’un des boutons dupliqués et que vous examinez le panneau Effets de défilement, vous constaterez que les paramètres de l’onglet Mouvement correspondent aux paramètres appliqués au bouton Home (Accueil). De même, la position clé de chacun des boutons est située à 460 pixels au-dessous du bouton précédent (le même espacement que celui existant entre chaque bouton sur la page).

10. Calculez la hauteur totale des quatre boutons lorsqu’ils sont alignés à leurs emplacements définitifs en additionnant leurs hauteurs et les espacements. Dans le site exemple, les boutons font chacun 116 pixels de haut et sont espacés de 4 pixels les uns des autres. Ainsi, la hauteur totale de la barre de menus verticale (une fois assemblée) est de 476 pixels. Utilisez l’outil Rectangle pour dessiner un rectangle de la largeur de section de page souhaitée et de la même hauteur que la barre de menus. Dans cet exemple, le rectangle fait 931 pixels de large sur 476 pixels de haut.
11. Si vous souhaitez copier la conception du site exemple, vous pouvez définir la couleur de fond du rectangle sur rose pâle, avec une ombre plus claire que l’état Normal des boutons. Vous pouvez également, si vous le souhaitez, créer des angles arrondis en saisissant une valeur de rayon d’angle dans le panneau de configuration. Dans cet exemple, les quatre angles sont définis sur 10 pixels.

12. Utilisez l’outil Sélection pour aligner le rectangle afin que son bord supérieur soit environ à 5 094 pixels du haut de la page. Assurez-vous également que le côté gauche du rectangle est verticalement aligné sur le côté gauche des boutons. Dans le site exemple, le rectangle et les boutons sont tous à 14 pixels du côté gauche de la page. Vous pouvez afficher ces paramètres en sélectionnant un élément et en ouvrant le panneau Transformation. La valeur X représente la distance à partir du bord gauche (14 pixels) et la valeur Y représente la distance à partir du haut de la page (5 094 pixels).
13. Alors que le rectangle est toujours sélectionné, ouvrez le panneau Effets de défilement et activez la case à cocher Mouvement dans l’onglet Mouvement. Définissez la position clé sur 4 979.
14. Définissez la section Mouvement initial pour que le rectangle se déplace vers la droite à une vitesse égale à 1 fois la vitesse de défilement. Laissez tous les autres champs de l’onglet Mouvement définis sur 0.

15. Pour vous assurer que le rectangle se positionne derrière les quatre boutons, sélectionnez Objet > Arrière-plan alors que le rectangle est sélectionné.
16. Choisissez Fichier > Importer, recherchez et sélectionnez un fichier image, puis cliquez une fois sur la page pour l’importer. Dans cet exemple, un fichier PNG doté d’une transparence est défini pour afficher une image représentant une ampoule. L’ampoule est placée au-dessus du grand rectangle, plus à droite, loin de la zone couverte par les boutons de menu. Dans cet exemple, l’image est placée à 501 pixels de la gauche (position X) et à 5 245 pixels du haut de la page (position Y).
17. Pour vous assurer que l’image importée est placée derrière les quatre boutons, choisissez Objet > Arrière-plan alors que l’image est sélectionnée. L’objectif est d’afficher l’image importée au-dessus du grand rectangle mais derrière les quatre boutons.
18. Alors que l’image importée est sélectionnée, ouvrez l’onglet Mouvement du panneau Effets de défilement et activez la case à cocher Mouvement. Définissez la position clé sur la valeur souhaitée. Dans le site exemple, elle est définie sur 4 979 pixels.
19. Dans la section Mouvement initial, définissez la valeur vers la droite pour que l’image se déplace à une vitesse égale à 0,75 fois la vitesse de défilement. Définissez toutes les autres valeurs de direction sur 0.

20. Utilisez l’outil Texte pour créer un bloc de texte. Dans le fichier d’exemple, le contenu du bloc de texte est le suivant : Stack linked text frames with high contrast roll-overs to create unusual menus (Empilez des blocs de texte liés avec des survols très contrastés pour créer des menus originaux). Vous pouvez, toutefois, saisir le contenu textuel de votre choix. Utilisez les options de mise en forme du panneau de configuration pour personnaliser le style du texte comme vous le souhaitez. Dans cet exemple, aucune couleur de fond d’arrière-plan n’a été appliquée au bloc de texte.
21. Utilisez l’outil Sélection pour placer le bloc de texte à droite de l’image importée. Dans cet exemple, le bloc de texte est défini sur une valeur X de 357 pixels (à partir du bord gauche) et une valeur Y de 5 136 pixels (à partir du haut). L’emplacement réel dépend du contenu textuel et des options de mise en forme appliqués au bloc de texte.
22. Alors que le bloc de texte est sélectionné, utilisez l’option Objet > Arrière-plan pour le positionner ou le déplacer dans le panneau Calques afin qu’il s’affiche derrière les quatre boutons mais au-dessus du grand rectangle.
23. Activez la case à cocher Mouvement du panneau Effets de défilement. Définissez la position clé en faisant glisser la poignée en T ou en saisissant une valeur. Dans le site exemple, la position clé est définie sur 4 979 pixels, soit la valeur utilisée par l’image importée (illustration représentant une ampoule).
24. Dans la section Mouvement initial, définissez le bloc de texte pour qu’il se déplace vers la gauche à une vitesse égale à la moitié (0,5 fois) de la vitesse de défilement. Définissez tous les autres champs sur 0.

La section du menu empilé de base est maintenant terminée. Il existe, toutefois, un élément de conception supplémentaire que vous pouvez ajouter. Cela implique d’insérer plusieurs rectangles pivotés au-dessus de l’angle inférieur droit du grand rectangle, de la même façon que l’exemple de menu coulissant utilisait des rectangles pivotés pour ajouter un effet de rayure diagonale.

25. Utilisez l’outil Rectangle pour dessiner plusieurs rectangles de différentes largeurs. Remplissez les rectangles de la même couleur que celle appliquée au fond du navigateur. Ainsi, les rectangles resteront invisibles jusqu’à ce que le grand rectangle se déplace vers la droite, à sa place, derrière eux. Vous pouvez, si vous le souhaitez, regrouper l’ensemble des rectangles diagonaux afin de les utiliser comme un seul élément.

26. Utilisez, si besoin, le panneau Calques ou choisissez Objet > Arrière-plan pour que le grand rectangle apparaisse en arrière-plan, derrière tous les autres éléments de la page.
27. Veillez à tester régulièrement votre conception en cliquant sur Aperçu ou en prévisualisant la page dans un navigateur, et en la faisant défiler vers le bas pour voir le menu empilé se mettre en place. Une fois le test terminé, revenez à Muse. 

Pour créer un effet d’arrière-plan en mouvement, vous pouvez créer une série de grands rectangles remplis d’images d’arrière-plan mosaïques couvrant toute la longueur d’une longue page. Cet exemple utilise l’onglet Défilement du menu Fond (plutôt que l’onglet Mouvement du panneau Effets de défilement) pour appliquer les paramètres de mouvement.

Pour créer un effet d’arrière-plan en mouvement similaire, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 6 254 pixels.

2. En haut de la page, utilisez l’outil Rectangle pour dessiner un grand rectangle. Dans le site exemple, le rectangle fait 1 159 pixels de large sur 1 312 pixels de haut. Utilisez l’outil Sélection pour centrer le rectangle sur la page, avec les deux côtés s’étendant au-delà des côtés de la fenêtre du navigateur.
3. Alors que le rectangle est toujours sélectionné, utilisez le menu Fond pour définir une image d’arrière-plan. Définissez le menu Ajustement sur Mosaïque pour afficher l’image en mosaïque.

4. Vous pouvez, si vous le souhaitez, utiliser le menu Effets pour définir un effet d’ombre, afin de créer une bordure plus spectaculaire autour du rectangle.
5. Alors que le rectangle rempli est sélectionné, ouvrez l’onglet Défilement du menu Fond. Activez la case à cocher Mouvement, puis cliquez sur la poignée en T et faites-la glisser ou saisissez une valeur dans le champ pour définir la position clé. Dans le site exemple, la position clé est définie sur 512 pixels. Vous pouvez, toutefois, réduire la poignée pour l’aligner sur le bord supérieur du rectangle, si vous le souhaitez.
6. Dans la section Mouvement initial, définissez les directions vers le bas et vers la gauche, puis définissez les deux vitesses sur une valeur égale à 0,2 fois la vitesse du défilement. Définissez les mêmes paramètres dans la section Mouvement final.

7. Répétez les étapes 2 à 6 pour créer un autre rectangle rempli. Placez le nouveau rectangle directement au-dessous du premier rectangle que vous avez créé, de sorte qu’aucune zone de fond du navigateur ne s’affiche au travers et qu’il n’y ait aucun espace entre les deux rectangles. Remplissez le nouveau rectangle avec un fond d’arrière-plan constitué d’images mosaïques.
8. Répétez l’étape 7 pour créer un troisième grand rectangle placé juste au-dessous du deuxième rectangle. Utilisez le menu Fond pour définir une autre image d’arrière-plan mosaïque. Il peut s’avérer utile d’effectuer un zoom arrière à l’aide du menu Affichage pour afficher tous les rectangles et les aligner verticalement sur la page.

9. Alors que le deuxième rectangle est sélectionné, ouvrez l’onglet Défilement du menu Fond. Mettez à jour la section Mouvement initial pour déplacer le rectangle vers la droite, à une vitesse égale à 0,3 fois la vitesse de défilement. Dans la section Mouvement final, appliquez les mêmes paramètres pour déplacer le rectangle vers la droite, à une vitesse égale à 0,3 fois la vitesse de défilement. Laissez les deux champs de direction verticale définis sur 0.

10. Sélectionnez le troisième rectangle et mettez à jour les paramètres de l’onglet Défilement du menu Fond. Définissez la section Mouvement initial pour créer un déplacement vers le haut d’une vitesse égale à 0,25 fois la vitesse de défilement et un déplacement vers la gauche d’une vitesse égale à 0,6 fois la vitesse de défilement. Appliquez les mêmes paramètres dans la section Mouvement final du troisième rectangle.
11. Testez la page en sélectionnant Fichier > Prévisualiser la page dans le navigateur. Faites défiler la page pour voir chacun des rectangles de la mosaïque se déplacer en diagonale jusqu’au bas de la page. Lorsque vous faites défiler la page vers le haut, les rectangles continuent de se déplacer.
12. Fermez le navigateur et revenez à l’espace de travail Muse.

Dans cet exemple, un graphique à barres semble s’animer sur la page. Une flèche rose se déplace vers le haut, se faufilant entre les barres du graphique. Bien que les barres du graphique semblent surgir du bas du graphique, elles sont en fait constituées de rectangles de couleur unie auxquels des effets de défilement de mouvement ont été appliqués afin qu’ils apparaissent derrière de plus grands rectangles blancs (remplis de la même couleur unie (blanc) que l’arrière-plan de la page).

Cet exemple utilise plusieurs techniques combinées avec des effets de défilement. Ces éléments sont placés devant et derrière les uns des autres à l’aide du panneau Calques. Des rectangles blancs sont dessinés au-dessus des éléments du graphique. Lorsque les rectangles blancs couvrent le graphique, les barres et la flèche sont invisibles, car elles sont masquées. Les rectangles blancs et le tableau du cadre sont dotés de la valeur 0 dans les effets de défilement de mouvement. Ils restent ainsi en place lorsque vous faites défiler la page. Des effets de défilement de mouvement sont appliqués aux barres et à la flèche rose qui sont superposées en dessous, afin qu’elles se déplacent vers le haut et deviennent visibles au fur et à mesure que le graphique à barres apparaît.

Pour créer un effet de masque similaire, procédez comme suit :

1. En mode Conception, sélectionnez Page > Propriétés de la page. Définissez le champ Hauteur min. sur une valeur beaucoup plus élevée. Dans le site exemple, la hauteur minimale de la page est définie sur 6 076 pixels.
2. Définissez les paramètres Page et Fond du navigateur sur une couleur unie (blanc ou n’importe quelle autre couleur de votre choix, mais utilisez la même couleur pour remplir plus tard les rectangles de masque).
3. Utilisez l’outil Rectangle pour dessiner un grand rectangle sur la page. Dans le site exemple, le rectangle fait 804 pixels de large sur 489 pixels de haut.
4. Définissez la couleur de fond du rectangle sur Sans. Définissez la couleur de contour de votre choix. Dans le menu Contour, définissez les côtés gauche et inférieur du rectangle pour qu’ils affichent un contour doté d’une épaisseur de 20, tandis que les côtés droit et supérieur sont définis sur 0 pour masquer leur contour. Cette opération crée la base du cadre du graphique à barres.
    

5. Alors que le rectangle est sélectionné, ouvrez l’onglet Mouvement du panneau Effets de défilement. Définissez la position clé et saisissez la valeur 0 dans les quatre champs. Ce paramétrage indique que le rectangle ne se déplace pas lorsque vous faites défiler la page avant ou après la position clé. Le rectangle reste donc à sa place dans ces cas.

6. Utilisez l’outil Rectangle pour dessiner deux autres rectangles plus grands. Dessinez le premier rectangle pour qu’il s’aligne sur le bord gauche du cadre du graphique. Dans le site exemple, le rectangle fait 657 pixels de large sur 1 810 pixels de haut.
7. Dessinez le second rectangle sous le cadre du graphique, pour qu’il s’aligne avec le bord inférieur du graphique. Dans le site exemple, le rectangle fait 1 002 pixels de large sur 1 541 pixels de haut.
8. Définissez la couleur de fond des deux rectangles sur blanc (ou la couleur du fond du navigateur) et le contour sur 0. Utilisez l’outil Sélection pour aligner les rectangles avec les deux bords du cadre du graphique.
   

9. Alors que les rectangles sont sélectionnés, cliquez avec le bouton droit de la souris et sélectionnez Objet > Associer pour regrouper les deux rectangles de masquage.
10. Alors que le groupe de rectangles est sélectionné, ouvrez l’onglet Mouvement du panneau Effets de défilement. Définissez la position clé (dans l’exemple, elle est définie sur 1 516 pixels) et saisissez la valeur 0 dans les quatre champs. Ce paramétrage indique que le groupe de rectangles blancs ne se déplacera pas lorsque vous faites défiler la page avant ou après la position clé. Le groupe reste à sa place, tout comme le tableau externe du cadre du graphique.
11. Utilisez le panneau Calques pour masquer ou épingler temporairement le groupe.
12. Faites défiler la page vers le bas jusqu’à l’espace situé au-dessous du groupe et utilisez l’outil Rectangle pour dessiner cinq rectangles de largeur identique. Dans le site exemple, toutes les barres font 74 pixels de large avec différentes hauteurs. De gauche à droite, les cinq rectangles de l’exemple font 141, 188, 292, 444 et 583 pixels de haut. Tous les rectangles sont remplis de la même couleur verte que le contour qui définit les bords gauche et inférieur du cadre du graphique.

13. L’emplacement de chacun des rectangles (de gauche à droite) est indiqué ci-dessous, par leurs valeurs X et Y :
    • X : 200 Y : 2 622
    • X : 330 Y : 2 797 
    • X : 460 Y : 3 081 
    • X : 590 Y : 3 304 
    • X : 721 Y : 3 499
14. Ensuite, sélectionnez chaque rectangle, en commençant par le rectangle de gauche. Sélectionnez chaque rectangle, activez la case à cocher Mouvement de l’onglet Mouvement du panneau Effets de défilement et définissez les positions clés comme suit :
    • 2 099
    • 2 321
    • 2 709
    • 3 084
    • 3 441
15. Alors que tous les rectangles sont sélectionnés, mettez à jour les paramètres du panneau Effets de défilement, afin que la section Mouvement initial indique un déplacement vers le haut d’une vitesse égale à 1 fois la vitesse de défilement. Définissez tous les autres champs sur 0.
     

16. Importez un fichier PNG doté d’une transparence sur la page. Dans le site exemple, le fichier PNG est une illustration représentant une flèche rose qui fait des zigzags vers le haut. Le fichier PNG utilisé pour cet exemple fait 695 pixels de large sur 443 pixels de haut. Une fois le fichier importé sur la page, déplacez-le à l’emplacement défini par les valeurs X : 78 et Y : 3 427.
17. Dans le panneau Calques, placez le fichier PNG au-dessous des première et troisième barres (à partir de la gauche) mais au-dessus des deuxième, quatrième et cinquième barres.

18. Alors que l’image de flèche est sélectionnée, ouvrez l’onglet Mouvement du panneau Effets de défilement et activez la case à cocher Mouvement. Définissez la position clé (dans l’exemple, elle est définie sur 3 238 pixels). Dans la section Mouvement initial, définissez les directions vers le haut et vers la droite et entrez une vitesse égale à 0,25 fois la vitesse de défilement dans les deux champs de mouvement initial. Définissez les deux champs de la section Mouvement final sur 0.

19. Dans le panneau Calques, affichez et déverrouillez le groupe des deux rectangles blancs que vous avez précédemment masqués et épinglés. Déplacez le groupe au-dessus des autres éléments, afin qu’il s’affiche au-dessus de l’autre contenu de la page. Le groupe étant au-dessus, il agit comme un masque afin que les barres et les graphismes de flèche ne s’affichent que lorsqu’ils se déplacent vers le haut à l’intérieur du cadre du graphique.
20. Testez la page en sélectionnant Fichier > Prévisualiser la page dans le navigateur. Faites défiler la page pour voir le cadre du graphique à barres se mettre en place lorsque les deux rectangles blancs qui masquent les barres cachent les éléments du graphique à barres jusqu’à ce qu’ils soient dans le cadre du graphique.
21. Fermez le navigateur et revenez à l’espace de travail Muse.

Consultez le site web Demential Lab pour voir la fonction Effets de défilement en action.