Application d’effets de défilement aux images de fond du navigateur ou d’arrière-plan

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.

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.

2. 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.
   

3. Cliquez sur l’onglet Défilement. Activez la case mouvement de défilement.

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.

4. 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.
5. 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).
6. 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.
7. Pour fermer le menu Fond du navigateur, cliquez n’importe où sur la page.
8. 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.
9. 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.

5. Cliquez sur l’onglet Défilement dans le menu Fond et définissez les options de défilement.

6. Cliquez sur l’onglet Défilement dans le menu Fond. Activez la case à cocher Mouvement et définissez les options de défilement.

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.

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 :

7. 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é.
8. 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é.
9. 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é.
   

10. Pour fermer le menu Fond, cliquez n’importe où sur la page.
11. 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.
12. Une fois le test terminé, revenez à Muse ou cliquez sur le bouton Conception pour poursuivre l’édition de la page.