Depuis sa création, internet n’a cessé d’évoluer, les web designers ont par la même occasion imposé des tendances en matière de web design et d’ergonomie. Comme un phénomène de mode, le web design suit des codes graphiques qui évoluent également en fonction des tendances et des choix marketing des plus grandes marques. Pour créer un univers attrayant et dynamique sur un site web, il y a peu de temps encore la solution était la création du site en flash. Malgré un temps de chargement parfois très long, ce type de site s’est rapidement fait une place considérable sur internet, jusqu’à l’arrivée des tablettes tactiles sur le marché. En effet, lors de la sortie de l’ipad, Apple a refusé de rendre compatible son navigateur web “Safari“ avec les modules flash. L’explication est simple et rationnelle, flash est trop gourmand en ressource et diminuerait significativement l’autonomie de l’ipad qui s’apprête à révolutionner la façon dont on surfe sur internet. L’heure du HTML 5 est arrivée et permet de concevoir des sites web sophistiqués sans utiliser la vieillissante technique flash d’Adobe qui est vouée à disparaître complètement dans les prochaines années. Ce nouvel élan permet aux web designers de créer des sites web élégants et compatibles avec n’importe quel type de support : ordinateurs, smartphones, tablettes… Apple a mené la guerre contre Adobe pour le plus grand bien du web, et aujourd’hui un nouvel engouement vient bouleverser le web design avec l’arrivée du parallaxe design.
La notion de parallaxe dans le web design
Par définition, le parallaxe est l’incidence du changement de position de l’observateur sur le visuel d’un objet, ce qui provoque une notion de mouvement et de perspective coordonnée avec l’angle de vue. L’effet de parallaxe permet de concevoir un design en plusieurs couches, à l’image des logiciels de conception comme Photoshop, Indesign ou Illustrator. L’effet permet ainsi de superposer plusieurs couches et de les mettre en mouvement en fonction du scroll de la souris. Cet effet est par exemple utilisé dans la dernière mise à jour de iOS sur l’écran d’accueil de l’iphone ou de l’ipad : lorsque vous regardez votre tablette ou téléphone d’un angle de vue différent, le fond d’écran bouge lorsque celui-ci est verrouillé. Vous pouvez d’ailleurs désactiver cet effet de parallaxe dans le menu préférence. Apple en a profité pour remplacer le terme parallaxe par perspective, ce qui est aujourd’hui plus explicite pour les novices. Le parallaxe design permet à l’internaute d’avoir une meilleure perception de l’univers d’une marque avec une navigation originale et fluide qui interagit en fonction du positionnement de la souris et de la vitesse du scroll.
Les possibilités de mouvements
Vous pouvez donc créer votre site en plusieurs couches, ce qui permet ensuite de définir des mouvements entre elles afin de faire passer un contenu en dessous ou par dessus un autre. Le résultat est du plus bel effet et ne complique pas forcément la navigation du site. Bien souvent au contraire, l’effet de parallaxe rend la découverte du contenu du site plus ludique et plus agréable.
Il est possible de définir et d’ajuster précisément les vitesses de déplacement d’un objet (texte, fond, logo, icône, photo…). Les déplacements peuvent se faire horizontalement ou verticalement. En fonction des paramètres, vous pouvez également obtenir des mouvements en diagonale. Afin de bien comprendre le parallaxe, il faut avant tout bien assimiler cette notion de vitesse qui est calculée à partir de la vitesse du scroll de la souris qui aura pour valeur 1x. sur trois événements distincts : le mouvement initial, la position clé, et le mouvement final qui auront une valeur exprimé en pixel, le point de départ étant le haut du navigateur avec 0 px.
La transparence et l’opacité
En plus d’un mouvement, ou de manière indépendante le parallaxe design offre la possibilité de gérer le changement d’opacité d’un objet à partir de trois positions (position de fondu 1, position clé, position de fondu 2). Ce type d’effet permet par exemple d’afficher progressivement des contenus texte ou de sublimer une image en la faisant apparaître en fondu.
Mouvement en fonction du positionnement du pointeur
Il est possible de définir des mouvements changements d’opacité à partir du positionnement du pointeur de la souris et non plus à partir du scroll de la souris. Cet effet original est a utiliser avec parcimonie car il risque de déstabiliser l’internaute lambda et de compliquer la visite du site.
Pour agrémenter vos créations de site en parallaxe design, vous pouvez également intégrer des animations en html5 sur les icônes du site, Edge animate d’Adobe permet par exemple de créer facilement des animations compatibles avec tous les supports. Une tendance également très en vogue aujourd’hui consiste à intégrer des vidéos en fond, sans son et sans bouton de lecture, comme un véritable “background“. Ce type d’intégration permet de véhiculer un sentiment plus fort qu’une simple photo et plonge immédiatement l’internaute dans l’univers du site. Veillez à optimiser au maximum vos contenus vidéo avant de les intégrer afin d’améliorer le temps de chargement de votre page web. Pensez également à mettre à disposition du navigateur vos vidéos au format mp4 et webm car elles ne sont pas toutes compatible avec l’un ou l’autre format.
Voici ci-dessous le site web de notre agence réalisé en parallaxe design avec des petites animations en html5 et de multiples “backgroud“ vidéo intégrés, de quoi vous faire une idée des nouvelles possibilités offertes par le web.
