L’une des techniques les plus « chaudes » sur le web aujourd’hui est le défilement de la parallaxe. Nous avons tous visité des sites où l’on fait tourner la molette de la souris et où le contenu de la page se déplace de haut en bas ou de bas en haut de la page en même temps que la molette de la souris.
Pour les novices en matière de conception web et de graphisme, cette technique peut être extrêmement difficile à réaliser en raison de la quantité de CSS nécessaire.
Si cela vous décrit, il existe un certain nombre de candidatures qui peuvent tout simplement plaire aux graphistes. Ils utilisent essentiellement une approche familière de la mise en page des pages web, ce qui signifie qu’il n’y a pas beaucoup, voire pas du tout, de codage. Une application qui a vraiment pris de l’importance est Adobe Muse.
Une technique incroyablement facile à réaliser avec Muse est le défilement de la parallaxe et, si vous voulez voir la version complète de l’exercice. Lorsque vous faites tourner la molette de votre souris, le texte semble se déplacer vers le haut ou le bas de la page et les images changent.
Commençons.
Contenu
Créer une page web
Lorsque vous lancez Muse, cliquez sur le bouton Nouveau site lien. Cela ouvrira le Nouvelles propriétés du site. Ce projet sera conçu pour une application de bureau et vous pouvez le sélectionner dans la Mise en page initiale menu déroulant. Vous pouvez également définir les valeurs pour le nombre de colonnes, la largeur de la gouttière, les marges et le rembourrage. Dans ce cas, nous n’étions pas vraiment concernés par cette question et avons simplement cliqué sur OK.
Format de la page
Lorsque vous avez défini les propriétés du site et cliqué sur OK vous avez été emmené à ce qu’on appelle Plan vue. Il y a une Accueil en haut de la page et une Page principale en bas de la fenêtre. Nous n’avions besoin que d’une page. Pour accéder à Design View, nous avons double-cliqué sur la page d’accueil, ce qui a ouvert l’interface.
À gauche, vous trouverez quelques outils de base et à droite, une variété de panneaux utilisés pour manipuler le contenu de la page. En haut, on trouve les propriétés qui peuvent être appliquées à la page ou à tout ce qui est sélectionné sur la page. Dans ce cas, nous avons voulu avoir un fond noir. Pour ce faire, nous cliquons sur le bouton Remplissage du navigateur et a choisi le noir dans le Color Picker.
Ajouter du texte à la page
L’étape suivante consiste à ajouter du texte à la page. Nous avons sélectionné le Outil de texte et a dessiné une boîte de texte. Nous avons entré le mot « Bienvenue » et, dans les Propriétés, nous avons mis le texte à Arial, 120 pixels Blanc. Aligné au centre.
Nous sommes ensuite passés à l’outil de sélection, nous avons cliqué sur la zone de texte et avons défini son Position Y à 168 pixels à partir du haut. La zone de texte étant toujours sélectionnée, nous avons ouvert le Aligner le panneau et a aligné la zone de texte sur le centre.
Enfin, la zone de texte étant sélectionnée, nous avons maintenu la Option/Alt et Shift et a fait quatre copies de la zone de texte. Nous avons modifié le texte et la position Y de chaque copie :
- Au, 871
- Graphiques, 1621
- Logiciels, 2371
Vous remarquerez que, lorsque vous définissez l’emplacement de chaque zone de texte, la page se redimensionne pour s’adapter à l’emplacement du texte.
Ajout de placeurs d’images
L’étape suivante consiste à placer des images entre les blocs de texte.
La première étape consiste à sélectionner le Outil Rectangle et dessiner notre boîte qui s’étend d’un côté à l’autre de la page. Avec le rectangle sélectionné, nous fixons son hauteur à 250 pixels et son Position Y à 425 pixels. Il est prévu qu’ils s’étirent ou se contractent toujours à la largeur de la page pour s’adapter à la fenêtre de visualisation du navigateur de l’utilisateur. Pour ce faire, nous avons cliqué sur le bouton 100% de la largeur dans les Propriétés. Cela a pour effet de griser la valeur X et de garantir que l’image est toujours à 100% de la largeur de la fenêtre de visualisation dans un navigateur.
Ajouter des images à des emplacements d’images
Avec le Rectangle sélectionné, nous avons cliqué sur le Remplir le lien – pas la puce de couleur – et a cliqué sur le bouton Iencre mage pour ajouter une image au rectangle. Dans le Adaptation nous avons sélectionné Une échelle adaptée et a cliqué sur le bouton poignée centrale dans la Position pour s’assurer que l’image est à l’échelle du centre de l’image.
Ensuite, nous avons utilisé le Option/Alt-Shift-drag pour créer une copie de l’image entre les deux premiers blocs de texte, a ouvert le panneau de remplissage et a échangé l’image contre une autre. Nous avons fait de même pour les deux autres images.
Une fois les images en place, il est temps d’ajouter le mouvement.
Ajouter le défilement de la parallaxe
Il existe plusieurs façons d’ajouter le défilement de la parallaxe dans Adobe Muse. Nous allons vous montrer une façon simple de le faire.
Avec le panneau « Remplir » ouvert, cliquez sur le bouton Onglet de défilement et, lorsqu’il s’ouvre, cliquez sur le bouton Case à cocher « Motion.
Vous verrez des valeurs pour Initial et Proposition finale. Celles-ci déterminent la vitesse à laquelle l’image se déplace par rapport à la roue de défilement. Par exemple, une valeur de 1,5 fera bouger l’image 1,5 fois plus vite que la roue. Nous avons utilisé une valeur de 0 pour verrouiller les images en place.
Le Flèches horizontales et verticales déterminer la direction du mouvement. Si les valeurs sont 0, les images ne bougeront pas, quelle que soit la flèche sur laquelle vous cliquez.
La valeur moyenne – Poste clé – indique le point où les images commencent à bouger. La ligne au-dessus de l’image commence, pour cette image, à 325 pixels du haut de la page. Lorsque le défilement atteint cette valeur, l’image commence à bouger. Vous pouvez modifier cette valeur soit en la changeant dans la boîte de dialogue, soit en cliquant et en faisant glisser le point en haut de la ligne vers le haut ou vers le bas.
Répétez cette opération pour les autres images de la page.
À ce stade, nous étions finis. La première chose que nous avons faite, pour des raisons évidentes, a été de sélectionner Fichier > Enregistrer le site. Pour tester le navigateur, nous avons simplement sélectionné Fichier > Page de prévisualisation dans le navigateur. Cela a ouvert le navigateur par défaut de notre ordinateur et, lorsque la page s’est ouverte, nous avons commencé à la faire défiler.
