Lisez cet article pour découvrir les effets de défilement dans Adobe Muse. Lisez la suite pour apprendre les concepts des effets de défilement.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Les effets de défilement sont une technique de conception web qui vous permet de définir la vitesse et la direction de chaque élément de votre page web. Grâce aux effets de défilement, vous pouvez créer des sites web animés dynamiques impliquant au moins deux éléments de page qui se déplacent dans le navigateur à différentes vitesses. Adobe Muse vous permet de configurer différents paramètres, dont les paramètres de mouvement, l’opacité et les paramètres de lecture d’un diaporama ou d’une animation.

Vous pouvez appliquer des effets de défilement à presque tous les éléments dans Adobe Muse dans un site fixe ou à l’aide de points d’arrêt fixes. Les éléments incluent les images d’arrière-plan, le texte et les images. Vous pouvez également appliquer un effet de défilement du remplissage de l’arrière-plan à tous les éléments qui ont une image d’arrière-plan définie pour un fond. Vous pouvez aussi activer les effets de défilement dans le menu Fond du navigateur si vous définissez une image de remplissage d’arrière-plan pour un affichage dans la fenêtre du navigateur. 

Vous ne pouvez pas appliquer les effets de défilement à des éléments de remplissage d’arrière-plan qui utilisent certains effets graphiques, tels que le Biseau ou la Lueur interne. Lorsque ces types d’effets sont appliqués à l’objet sélectionné, les options de la section Défilement du panneau Fond sont désactivées.

Remarque :

Pour appliquer les effets de défilement à un élément, assurez-vous que son état est défini sur Normal.

Outre les images et les remplissages d’arrière-plan, les effets de défilement sont souvent utilisés dans les animations pour donner une illusion de profondeur. Vous pouvez définir différents mouvements de vitesse pour différents éléments d’une page. Par exemple, une mise en page peut inclure un élément de premier plan qui se déplace deux fois plus vite qu’un élément de plan central. Un remplissage mosaïque d’arrière-plan derrière un contenu animé peut être défini à la moitié de la vitesse de l’élément central. Ces paramètres simulent la façon dont nos yeux font l’expérience du mouvement. Les objets les plus proches de notre cadre de référence donnent l’impression de se déplacer plus rapidement.

Les effets de défilement sont également utiles lorsque vous ajoutez des balises d’ancrage sur une page. Lorsqu’un visiteur clique sur un lien pour accéder à une balise d’ancrage sur une longue ou large page, les effets de défilement s’appliquent. A l’aide des effets de défilement et des balises d’ancrage, vous pouvez concevoir une page avec des sections qui semblent arriver en volant, se fondre sur la page ou s’animer. Vous pouvez également créer une série d’éléments de menu qui, ensemble, forment une barre de navigation consolidée lorsque le visiteur accède directement à une zone inférieure de la page.

Avant de commencer à utiliser les effets de défilement dans votre mise en page, prenez soin de vous familiariser avec les concepts clés suivants :

Position clé

La Position clé dans les effets de défilement correspond à la position où les éléments de page que vous configurez commencent à se déplacer. Par exemple, cliquez sur le menu Fond du navigateur et sélectionnez l’onglet Défilement. Le champ qui se trouve dans la partie centrale (affichant 0 px) correspond à la position clé. Lorsque vous activez les paramètres de mouvement, l’emplacement de la poignée en T s’affiche sur la page. Cette poignée en T contrôle l’étendue du mouvement. La valeur par défaut, 0 px, indique que la poignée en T est définie sur le bord supérieur de la fenêtre du navigateur.

Le nombre de pixels spécifié dans le champ Position clé indique que les changements que vous définissez dans la section Mouvement initial se produiront (dans cette direction et à cette vitesse) lorsque le visiteur fera défiler la page jusqu’à cet emplacement. Le haut de la page commence à 0, puis au fur et à mesure que vous faites défiler la page vers le bas, le nombre de pixels augmente. Dans le panneau Transformation (Fenêtre > Transformation), la distance mesurée à partir du haut de la page est représentée par la valeur Y.

Position clé

Mouvement initial

Dans les effets de défilement, le mouvement initial correspond à la position en px où commence le mouvement de défilement. Configurez le mouvement initial pour définir le comportement de défilement des éléments, entre la valeur de la position clé et le bord de l’élément de page.

Dans la section Mouvement initial, vous remarquerez que les valeurs des champs sont associées à un « x » minuscule. Celui-ci représente le multiplicateur. Si le visiteur fait défiler la page plus rapidement, le mouvement de l’effet de défilement s’accélère pour se déplacer au même rythme.

Mouvement final

Le mouvement final détermine le mouvement d’un élément de page lorsqu’un visiteur fait défiler la page au-delà de la valeur indiquée. Les valeurs saisies dans la section Mouvement final sont appliquées lorsque le visiteur fait défiler cette page au-delà de la position clé (emplacement de la poignée en T). 

L’élément auquel l’effet de défilement de mouvement a été appliqué se déplace dans les directions dont la valeur indiquée dans ce champ est supérieure à 0. Si les directions horizontale et verticale ont pour valeur 0, l’élément est épinglé sur la page et ne se déplace pas.

Si la section horizontale a pour valeur « 0 », le fond du navigateur ne se déplace pas horizontalement vers la gauche ou vers la droite.

Pour afficher une représentation visuelle des concepts clés liés aux effets de défilement dans Adobe Muse, voir l’image suivante :

Position clé, mouvement initial et mouvement final dans les effets de défilement
Position clé, mouvement initial et mouvement final dans les effets de défilement

Rendez-vous sur le site consacré aux effets de défilement pour comprendre le fonctionnement des effets de défilement.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne