• 0k
  • 0
Web design \ 19 Octobre 2015

Qu’est-ce que l’effet Parallaxe et comment en faire bon usage ?

Tout le monde en parle : le Parallax Scrolling, ou comme disait Marianne, l’effet Parallaxe, est une tendance graphique qui connaît un succès grandissant auprès des web designers professionnels. Mais pour nous, simples mortels, rien que le nom de cette technique peut s’avérer intimidant. Pas de panique, nous avons mené notre petite enquête !

Chez Wix, nous avons à cœur de vous simplifier la création Web aussi bien en théorie qu’en pratique. Nous avons donc interviewé nos designers afin qu’ils nous éclairent sur le sujet et nous offrent quelques conseils utiles – et facilement applicables.

Note : mea culpa, cette fonctionnalité n’est disponible que sur le nouvel Éditeur

 

Pour commencer, dé-diabolisons cette notion :

C’est quoi l’effet Parallaxe ?

Si le nom est sophistiqué, le concept est simple : en gros, l’image ou la texture qui se situe en arrière-plan défile moins vite que le reste du site. Pensez-y : si les objets « au premier rang » bougent plus rapidement que ceux situés  « au fond » de l’écran, cela donne l’illusion d’une certaine profondeur, proche de la 3D. En outre, cet effet, combiné à d’autres techniques, peut vraiment insuffler de la vie à un site internet. Intrigué(e) ? Continuez à lire !

Note : il est préférable d’avoir un site relativement long (verticalement) afin d’exploiter le potentiel du Parallaxe – voir long scrolling.

Comment l’utiliser ?

À l’instar des animations, cette fonctionnalité est à double-tranchant : elle peut transformer votre site en chef d’œuvre d’utilisabilité ou, au contraire, en art abstrait – loin de nous la prétention de faire de la critique d’art mais, croyez-nous sur parole, la première option est préférable. Pour réussir la manœuvre et éviter ses dérives, nous vous présentons 4 conseils à appliquer facilement sur votre site.

Dans l’Éditeur : pour créer un effet Parallaxe, cliquez sur l’élément que vous souhaitez « ralentir » et sélectionnez l’option « Parallax » – sans blague ? C’est tout.

1 – Règle d’or : variez les plaisir

Une erreur commune – et tentante – est de vouloir animer avec le Parallaxe l’ensemble des éléments de votre design. Surtout pas malheureux ! Votre site risque fort d’en pâtir et il sera impossible pour vos visiteurs de s’y retrouver. Pour éviter cet écueil, intercalez entre vos visuels “Parallaxe” des bandes de couleurs (ou des images statiques/galeries) afin d’aérer votre mise en page et de mieux la structurer. Trop de Parallaxe tue le Parallaxe.

2 – Racontez une histoire en images

Pour ce faire, il vous faut sélectionner en amont une (courte) série d’images appartenant à une même thématique : votre activité. Les visuels doivent sembler faire partie du même récit, composer un ensemble harmonieux, et respecter l’identité de votre marque. Une fois votre choix effectué, il ne vous reste qu’à importer vos images sous forme de bandes sur votre site !

Si la manipulation est habilement réalisée, vous gagnez doublement :

  • Votre message devient plus percutant : nous mémorisons mieux les produits quand ils jouent un rôle dans des histoires, quand ils sont inclus dans un narratif. Pensez à toutes ces publicités à la radio ou à la télé : cette lessive a-t-elle vraiment sauvé le petit Martin d’une honte gravissime à l’école ? L’objectif de la manœuvre est de « raconter » le produit – pas de prévenir contre les dégâts des taches de pâte à tartiner.
  • Votre site devient plus esthétique : votre design prend du grade grâce à de belles images qui semblent s’enchaîner les unes aux autres selon une suite logique. L’effet Parallaxe permet de créer une transition quasi-naturelle entre les visuels. Les web designers les plus talentueux parviennent même à retranscrire une forme de chronologie.

Inspirez-vous : Template Wix de pizzeria.

Template de Site WIX Pizzeria

3 – Ajoutez des animations

L’ajout d’animations permet de renforcer l’aspect dynamique de l’effet Parallaxe. En faisant apparaitre progressivement vos textes (ou d’autres éléments graphiques) de bas en haut, il est possible de créer un contraste avec l’image qui elle, semble disparaître dans le décor (de haut en bas). Bien entendu, rien n’est gravé dans la pierre. Vous pouvez jouer avec les animations à volonté jusqu’à obtenir le rendu escompté. Et au pire, si votre design en prend un coup, vous pourrez toujours utiliser l’historique de votre site pour restaurer sa précédente version.

Inspirez-vous : Template Wix de coach sportif.

Personal Trainer Template de Site   WIX

4 – Utilisez des éléments visuels flous au premier plan

Si vous souhaitez donner un effet de profondeur à votre site subtilement, voici la recette secrète : sur une image Parallaxe nette en arrière-plan, superposez des éléments visuels fixes floutés. Comme sur une photographie, l’impression de distance naît naturellement sauf que dans votre cas, les visuels bougent à des rythmes différents ! Ainsi, l’image prend vie et ressemble presque à une animation vidéo.

Pour réaliser un effet flou, il vous suffit de travailler votre image sur l’éditeur de Wix – ou un autre outil en ligne destiné à cet usage. Ensuite superposez-la simplement à l’image de fond (qui elle, est Parallaxe). Le résultat est fascinant !

Note : attention à ce que l’image en premier plan soit en format PNG sur fond transparent.  

Inspirez-vous : Landing Page Wix pour annoncer le nouvel Éditeur.

Nouvel Éditeur Wix

Envie d’essayer ? Créez votre propre site gratuitement !


Recevez le
par e-mail !

Rejoignez le blog de Wix Ne manquez rien de notre actu !

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Rejoignez-nous ! \ 

Découvrez nos conseils en web design, en marketing digital,
et suivez toute l'actu Wix ! Pas de spam. Promis.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email