Découvrez comment ajouter des effets de défilement aux fonds de navigateur et aux images d’arrière-plan d’un site web à l’aide d’Adobe Muse.

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.

Application d’effets de défilement aux images définies comme fond de navigateur

Les effets de défilement permettent de contrôler la vitesse des images d’arrière-plan du fond du navigateur ainsi que des éléments de page mosaïques ou non. Les effets de défilement peuvent être appliqués aux fonds de navigateur qui utilisent des images d’arrière-plan qui s’affichent en mosaïque, qui sont mises à l’échelle, qui s’ajustent au fond ou qui sont conservées dans leur taille d’origine. Le fond du navigateur se déplace dans la même direction que le défilement de la page, en fonction des directions et des vitesses que vous avez définies dans la section Défilement du menu Fond du navigateur.

Remarque :

les options de défilement sont grisées et ne sont pas disponibles tant que vous n’avez pas ajouté d’image à l’arrière-plan du fond de navigateur à l’aide du menu Fond du navigateur. Vous ne pouvez pas appliquer d’effets de défilement à un fond de navigateur qui n’est rempli que d’une couleur unie ou dégradée.

Comment ajouter des effets de défilement au fond de navigateur ?

Pour configurer des effets de mouvement pour des fonds de navigateur, procédez comme suit :

  1. En mode Conception, sélectionnez Page > Propriétés de la page. Dans l’onglet Mise en page, définissez le champ Hauteur min. sur 2 000 pixels. Cela garantit que la page sera suffisamment longue pour pouvoir défiler. Cliquez sur OK pour enregistrer les modifications et fermez la boîte de dialogue Propriétés de la page.
Mettez à jour le champ Hauteur min. dans les propriétés de la page pour rallonger la page.
Mettez à jour le champ Hauteur min. dans les propriétés de la page pour rallonger la page.

  1. Cliquez sur le lien Fond du navigateur dans le panneau de configuration. Dans l’onglet Fond, cliquez sur l’icône de dossier en regard de la partie Image pour choisir un fichier d’image sur votre bureau. Sélectionnez l’option de votre choix dans le menu Ajustement et activez l’option Défilement.
Ajoutez une image d’arrière-plan qui s’affiche dans la fenêtre du navigateur.
Ajoutez une image d’arrière-plan qui s’affiche dans la fenêtre du navigateur.

  1. Cliquez sur l’onglet Défilement. Activez la case mouvement de défilement.
Sélectionnez la case à cocher Mouvement pour activer les effets de défilement du menu Fond du navigateur.
Sélectionnez la case à cocher Mouvement pour activer les effets de défilement du menu Fond du navigateur.

Prenez un instant pour relire la section Défilement du menu Fond du navigateur. Le champ figurant dans la section centrale (contenant actuellement 0 px) correspond à la position clé (l’emplacement de la poignée en T) qui contrôle le mouvement. La valeur par défaut, 0 px, indique que la poignée en T est définie sur le haut du bord supérieur de la fenêtre du navigateur.

Le nombre de pixels spécifié dans le champ de 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 de configuration et dans le panneau Transformation, la distance mesurée à partir du haut de la page est représentée par la valeur Y.)

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é (dans ce cas, l’image mosaïque définie comme fond de navigateur) se déplace dans la ou 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.

Dans la section Mouvement initial, vous remarquerez que les valeurs des champs sont associées à un « x » minuscule. Celui-ci représente le multiplicateur. Sur l’image de fond de navigateur, la section Mouvement initial indique que le fond du navigateur se déplacera vers le haut, à une vitesse égale à 1 fois (la même vitesse que) la vitesse de défilement. 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.

Dans la section horizontale (vers la gauche et vers la droite), le champ affiche la valeur « 0 » qui indique que le fond du navigateur ne se déplacera pas horizontalement vers la gauche ou vers la droite.

La section Mouvement final contient une interface similaire. Sur l’image de fond de navigateur, le fond du navigateur est défini pour se déplacer vers le haut, à une vitesse égale à 1 fois la vitesse de défilement et ne se déplacera pas horizontalement.

Remarque :

placez le curseur de la souris sur le bouton Informations (icône i) situé dans l’angle inférieur gauche de l’onglet Défilement pour savoir comment les effets de défilement sont appliqués à un fond de navigateur.

  1. Cliquez sur les boutons fléchés de la section Mouvement initial pour spécifier la direction verticale (vers le haut ou vers le bas) ou la direction horizontale (vers la gauche ou vers la droite) afin de contrôler la direction du mouvement appliqué au fond du navigateur.
  2. Dans la section Mouvement initial, entrez des valeurs numériques ou cliquez sur les boutons Flèche vers le haut ou Flèche vers le bas pour définir les vitesses de défilement horizontale et verticale. Ces paramètres sont décrits plus en détails ci-dessous. Si le champ de vitesse est défini sur 0, cela signifie que l’élément ne se déplacera pas dans cette direction lors du défilement (avant que la position clé ne soit atteinte).
  3. Mettez à jour les valeurs de la section Mouvement final pour définir les directions souhaitées et saisissez des valeurs numériques dans les champs correspondants pour définir la vitesse à laquelle les effets de défilement se produisent.
  4. Pour fermer le menu Fond du navigateur, cliquez n’importe où sur la page.
  5. Choisissez Fichier > Prévisualiser la page dans le navigateur pour charger la page dans une nouvelle fenêtre de navigateur. Faites défiler la page pour voir les effets de défilement de mouvement en action.
  6. Une fois le test terminé, fermez le navigateur et revenez à Muse.

Application du mouvement de défilement à un remplissage d’arrière-plan d’un élément de page

Comment ajouter des effets de défilement au remplissage d’arrière-plan ?

Le mouvement de défilement peut être appliqué aux objets d’une page ayant des images d’arrière-plan mosaïques ou non mosaïques, utilisées comme remplissage. Procédez comme suit :

  1. Lors de la modification d’une page en mode Conception, sélectionnez Page > Propriétés de la page. Définissez la hauteur minimale sur une valeur plus élevée, comme 2 000 pixels, pour vous assurer que la page sera suffisamment longue pour pouvoir défiler. Cliquez sur OK pour enregistrer les modifications et fermez la boîte de dialogue Propriétés de la page. Vous pouvez également ajouter suffisamment de contenu à la page pour créer une page plus longue.
  2. En mode Conception, sélectionnez l’outil Rectangle dans le panneau de configuration.
  3. Dessinez un rectangle sur la page.
  4. Utilisez le menu Fond pour définir une image d’arrière-plan mosaïque ou non mosaïque afin de remplir le rectangle.
Ajoutez une image d’arrière-plan pour remplir le rectangle et définissez les options d’affichage souhaitées dans le menu Fond.
Ajoutez une image d’arrière-plan pour remplir le rectangle et définissez les options d’affichage souhaitées dans le menu Fond.

  1. Cliquez sur l’onglet Défilement dans le menu Fond et définissez les options de défilement.
  1. Cliquez sur l’onglet Défilement dans le menu Fond. Activez la case à cocher Mouvement et définissez les options de défilement.
Utilisez l’onglet Défilement du menu Fond pour activer le mouvement des effets de défilement.
Utilisez l’onglet Défilement du menu Fond pour activer le mouvement des effets de défilement et spécifier la direction et la vitesse du déplacement.

Notez la poignée en T qui s’affiche au-dessus de l’élément activé pour le mouvement de défilement. La poignée est une représentation visuelle de la position clé (qui est actuellement définie sur 100 px au-dessus de l’élément). L’icône située dans la section centrale de l’onglet Défilement correspond à l’emplacement de la poignée en T sur la page. Vous pouvez redéfinir une position clé à l’emplacement où les effets de défilement se produiront en saisissant une nouvelle valeur dans le champ central ou en faisant glisser la poignée en T sur la page. Lorsque vous faites glisser la poignée en T, la zone située au-dessus de la position clé est temporairement grisée.

Cliquez sur la poignée en T (représentation visuelle de la position clé) et faites-la glisser.
Cliquez sur la poignée en T et faites-la glisser à l’emplacement souhaité sur la page.

Remarque :

la poignée en T ne doit pas nécessairement être étirée au-delà de l’élément sélectionné. Vous pouvez cliquer sur la poignée en T et la faire glisser afin de l’aligner sur le bord supérieur d’un élément ou de l’étirer au-dessous d’un élément.

Muse permet une totale flexibilité lors du processus de création. Vous pouvez, en effet, choisir de faire glisser les poignées ou saisir des nombres dans le champ de position clé afin de contrôler de manière précise le mouvement qui se produit lorsqu’un visiteur fait défiler la page.

L’onglet Défilement du menu Fond fonctionne de la même manière que l’onglet Défilement du menu Fond du navigateur :

  1. Alors qu’un élément activé pour les effets de défilement de mouvement est sélectionné, utilisez l’onglet Défilement du menu Fond pour définir numériquement la position clé, ou cliquez sur la poignée en T et faites-la glisser sur la page pour définir la position clé.
  2. Définissez les directions verticale et horizontale, ainsi que les vitesses correspondantes par rapport à la vitesse à laquelle le visiteur fait défiler la page, dans la section Mouvement initial. Vous définissez ainsi le mouvement qui se produit lorsque le visiteur fait défiler la page jusqu’à la position clé.
  3. Définissez les directions verticale et horizontale, ainsi que les vitesses correspondantes en fonction de la vitesse à laquelle le visiteur fait défiler la page, dans la section Mouvement final. Vous définissez ainsi le mouvement qui se produit lorsque le visiteur fait défiler cette page au-delà de la position clé.

Remarque :

sur l’image avec les propriétés de défilement, le rectangle est défini pour se déplacer vers la droite, en se positionnant à une vitesse 3 fois plus élevée que la vitesse à laquelle le visiteur fait défiler la page, et arriver à sa position dans la conception lorsque la page atteint la position clé dans le navigateur. Lorsque le visiteur fait défiler la page au-delà de la position clé (100 pixels), le rectangle commence à se déplacer vers la gauche, en dehors de sa position, à une vitesse 3 fois plus élevée que la vitesse à laquelle le visiteur fait défiler la page. Dans cet exemple, le rectangle ne se déplace pas verticalement car les deux champs verticaux sont définis sur 0.

  1. Pour fermer le menu Fond, cliquez n’importe où sur la page.
  2. Sélectionnez Aperçu ou choisissez Fichier > Prévisualiser la page dans le navigateur pour tester les effets de défilement après les avoir appliqués. Faites défiler la page pour voir l’élément se déplacer.
  3. Une fois le test terminé, revenez à Muse ou cliquez sur le bouton Conception pour poursuivre l’édition de la page.

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