Découvrez comment ajouter et utiliser divers effets de défilement, tels que l’effet Elément par élément, le menu coulissant, le déroulement et plus encore.
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 :
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 :
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.
alors que les deux éléments sont sélectionnés, notez que les valeurs, qui sont les mêmes pour tous les éléments sélectionnés, s’affichent dans les champs. Dans cet exemple, le rectangle et le groupe sont définis sur 0 pour la direction verticale dans la section Mouvement initial, et sur 0,0 dans la section Mouvement final. Aucune valeur n’est affichée dans le champ de direction horizontale de la section Mouvement initial, car le groupe est configuré pour se déplacer vers la gauche à une vitesse égale à 1 fois (la même vitesse) la vitesse de défilement, tandis que cette valeur est définie sur 0 pour le rectangle.
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 :
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 :
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é).
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 :
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.
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.
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 :
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.
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 :
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.
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 :
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.
si vous décidez de dupliquer un bloc de texte pour créer un effet d’ombre portée, vous pouvez regrouper deux itérations ou plus du bloc de texte et les gérer comme un seul groupe lorsque vous appliquez les effets de défilement.
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 :
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).
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.
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 :
pour cet exemple, définir une couleur de fond du navigateur n’est pas important, car la page est recouverte de rectangles. Définissez la couleur de fond de la page sur Sans.
dans le site exemple, le troisième rectangle est plus long que les deux premiers. Vous pouvez faire glisser les poignées pour rallonger la hauteur du troisième rectangle dupliqué ou pour créer un quatrième rectangle afin de remplir la zone restante au bas de la page.
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 :
Consultez le site web Demential Lab pour voir la fonction Effets de défilement en action.
Accéder à votre compte