[Adobe Muse]Menu avec un effet Parallax



L'effet Parallax (Parallax effect)  est devenu très populaire dans la conception de sites web.  Grâce à celui-ci, vous pouvez créer différents effets visuels  avec un arrière-plan du site qui se déplace à différentes vitesses de celles du reste des éléments de la page, comme par exemple un menu... 


Dans Adobe Muse, vous pouvez également réaliser ces effets à l'aide de l'onglet effet de défilement. Dans ce tutoriel, vous apprendrez à créer un effet de défilement parallax horizontal. Prenez vos graphiques préparez votre histoire et commençons !


 1. Choisissez la couleur de votre fond (ici nous allons utiliser une seule couleur). Placez vos graphiques dans votre espace de travail Muse, en vous assurant qu'il y ai un espace suffisent entre eux, vous pourrez ensuite faire des ajustements. 





2. Allez dans l'onglet effet de défilement, puis cliquez sur chaque élément et déterminez le mouvement, effectuez cette étape avec tous les éléments de votre page, ensuite prévisualisez et faite les ajustements nécessaires. Vous devrez déplacer les éléments vers le haut et vers le bas ainsi que le point de mouvement jusqu'à l'obtention de l'effet désiré 

  • Le mouvement initial indique la vitesse ainsi que la direction avant que le défilement ne touche un certain point de votre page (23px dans cet exemple)
  • Le mouvement final indique la vitesse et l'orientation après que le défilement atteint un certain point (23px dans cet exemple)



3.Ajoutez également des liens d'ancrage créez autant de cercle que les éléments de votre page avec l'outil Elipse. Ensuite mettez-les à gauche de votre site web en les fixant de manière à ce qu'ils soient toujours visible quand vous faite un déplacement.
Positionnez les points d'ancrage à proximité des éléments et reliez-les aux cercle de sorte à ce que cela vous emmène au point désiré à chaque fois que vous cliquez dessus. 

 
Vous pouvez télécharger les graphiques utilisés à partir de Freepik ici.


Pour plus d'information vous pouvez regardez cette vidéo.



Commentaires

Posts les plus consultés de ce blog

5 Conseils utiles pour vous améliorer sur Adobe Muse

Comment convertir les polices en polices web et les utiliser avec des widgets

[Adobe Muse] Menu hamburger avec Lightbox et effets de textes