Voilà plusieurs mois que le web nous offre de nouvelles perspectives en matière de design. Des présentations plus profondes et imagées de ses contenus, où l’on se demande si l’on n’a pas scrollé trop vite et raté une information importante ou encore si ce site qui a avalé notre forfait 3G pour les 3 semaines à venir valait vraiment le coup. Bienvenue dans le monde du parallaxe.
Alors oui, je suis un peu mauvaise langue. Si l’effet est bien utilisé nous n’avons pas de problème de lisibilité et une bonne compression des images permet d’afficher des visuels fullscreen impressionnants sans ralentir votre dernier torrent de Céline Dion. Malheureusement, un parallaxe mal géré peut donner une impression de non-sens à l’utilisateur.
« Pourquoi toutes ces parties indépendantes… WTF je veux juste scroller en bas de cette page mais plus je scroll moins je comprends. »
Je vais essayer de décortiquer le principe du parallaxe, tester quelques solutions, vous proposer ce que j’ai retenu et ce qui m’a plu tout en gardant en tête les évidentes contraintes de lisibilité et d’accessibilité (dans une moindre mesure) de votre site.
C’est un terme un peu fourre-tout qui désigne plusieurs éléments qui se déplacent sur des plans et à des vitesses différentes. J’utilise le terme plan comme on l’utilise en photographie où différents plans se conjuguent pour créer une certaine profondeur de champ. La profondeur de champ étant visible par des vitesses perçues différentes (entre autres), elles sont une comparaison pratique et j’espère assez juste au parallaxe.
L’idée sera donc, pour nous, de simuler une certaine profondeur à notre page web. Parce qu’on parle bien ici de simulation, il n’y aura pas de 3ème dimension ou de WebGL, bien que les nouveautés de CSS pourraient nous le permettre.
Histoire de vous mettre dans le bain assez rapidement voici quelques exemples de parallaxe plutôt réussis :
Pour tenter de comprendre le fonctionnement du parallaxe, j’ai d’abord essayé avec mes propres armes. Ma favorite étant CSS , est-il possible de créer une impression de parallaxe en full CSS ? Oui !
Mais en voyant mon exemple lunaire, vous me dites : « Eh mais tout bouge à la même vitesse, tu te moquerais pas un peu de moi là ? ». Et là, une fois que les éléments se déplaceront réellement à des vitesses différentes, le parallaxe prendra une autre dimension. Mais CSS reste limité, et statique. Je vous invite à lire les quelques lignes du lien que vous venez d’ouvrir, à jouer avec, et me prouver que j’ai tort concernant les limites de CSS ;) .
Pour nous permettre de gérer des vitesses différentes nous utiliserons donc un autre outil que j’affectionne : JavaScript.
Je ne créerais pas de script aujourd’hui, je me contenterais d’explorer les différents plugins existants, leur utilisation et de vous en faire une sélection que j’espère être pertinente. Ce qui parait logique une fois dans la pratique mais pas forcément à la lecture de ce billet c’est que la plupart de ces scripts requièrent des éléments placés en position: absolute ou fixed afin de mieux contrôler leurs déplacements.
Skrollr étant le plus utilisé à priori sur GitHub, c’est celui par lequel je commence.
L’idée, avec Skrollr, c’est de modifier les styles de l’élément en fonction du “scroll” (nombre de pixel nous séparant du haut de page) de l’utilisateur. Nous l’initialisons avec les quelques lignes suivantes en bas de votre fichier html:
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
Ensuite, nous utiliserons les attributs data des éléments sur lesquels nous voulons appliquer un effet de parallaxe. Par exemple :
<div
data-0="background-color:rgb(0,0,255);"
data-500="background-color:rgb(255,0,0);">WOOOT
</div>
A la manière des keyframes CSS, nous pouvons, en fonction du scroll de l’utilisateur, définir des styles (ici la data est clairement inspiré de l’attibut style) qui s’animeront pendant le scroll. Sachez que Skrollr fera en sorte de toujours pouvoir scroller, même si la page manque de contenu. Donc si je mets une data-3000=”“ ma page fera au moins 3000px de haut (plus la hauteur de votre écran). Vous n’aurez pas non plus à vous soucier des préfixes pour certaines fonctionnalités, Skrollr les gère pour vous comme un grand.
L’utilisation des pixel peut être pratique, mais aujourd’hui plus aucun écran n’a la même taille, on va donc préférer des valeurs fixes. Lorsque l’élément atteint le haut de l’écran, nous pouvons utiliser data-top ou à l’inverse data-bottom lorsque l’élément apparaît.
Si l’utilisation des data html vous parait lourde ou simplement peu pratique, n’hésitez pas à jeter un oeil à skrollr-stylesheets qui vous permettra d’écrire vos animations dans des keyframes CSS (merveilleux n’est-ce pas).
Avec un site de démo qui en jette, parallax.js à tout de suite retenu mon attention, parce que contrairement à skrollr.js, ce script est aussi utilisable avec jQuery (avec une syntaxe un peu plus épurée) et surtout parce qu’il aborde le problème d’un façon totalement différente. Ici, c’est la position de la souris qui, comme le regard humain en mouvement, va changer la perspective de la page.
Avec parallax.js, nous allons définir des data-depth (ce qui me conforte dans ma comparaison aux profondeurs de champs) qui correspondent donc à la profondeur des éléments les uns par rapport aux autres. Pour la valeur 1, l’élément sera au premier plan, pour 0 au dernier.
Pour créer une scène nous pouvons donc utiliser ce genre de déclaration :
<ul id="scene">
<li class="layer" data-depth="0.00"><img src="layer6.png"></li>
<li class="layer" data-depth="0.20"><img src="layer5.png"></li>
<li class="layer" data-depth="0.40"><img src="layer4.png"></li>
<li class="layer" data-depth="0.60"><img src="layer3.png"></li>
<li class="layer" data-depth="0.80"><img src="layer2.png"></li>
<li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>
Puis, déclarer un élément du DOM pour le passer dans le constructeur de Parallax :
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
Vous pouvez aussi passer des arguments plus précis au constructeur. Je vous invite à les découvrir dans la documentation. Et vous pourrez aussi utiliser jQuery s’il est présent sur votre site, pour accéder à une syntaxe plus épurée.
$('#scene').parallax({
calibrateX: false,
calibrateY: true,
invertX: false,
invertY: true,
limitX: false,
limitY: 10,
scalarX: 2,
scalarY: 8,
frictionX: 0.2,
frictionY: 0.8
});
Sachez que parallax.js fonctionne aussi sur mobile. Je n’ai malheureusement pas de témoignage poignant à vous faire sur le rendu puisque le Nexus 4 qui traîne sur mon bureau galère un peu. Mais je serais curieux d’avoir vos retours.
Stellar.js a une approche un peu différente du parallaxe au scroll par rapport à Skrollr puisqu’ici pas de valeur à atteindre ou de nombre de pixel à définir dans un premier temps (bien que ce soit possible). Nous créons l’impression de profondeur par la vitesse de défilement des différents éléments de notre page ou de leur background.
Nous l’initialisons comme beaucoup de plugin jQuery :
// Sur toute la page
$(window).stellar();
// dans un scope plus restreint
$('#main').stellar();
Maintenant que nous savons exécuter Stellar.js, voici comment nous ajoutons des options :
<div data-stellar-ratio="2"> // cet élément scrollera 2x plus vite que ses congénères.
<div data-stellar-background-ratio="0.5"> // l'image de fond de cet élément se repositionnera après un léger déplacement.
Voilà, j’espère avoir donné un bon aperçu des différentes solutions qui s’offrent à vous ou à vos designers pour créer des sites plus sympas et efficaces. Je vous invite à aller lire les docs de chacun de ces outils pour plus de détails, conscient de n’avoir pas tout expliqué ici.
Je pense que cette nouvelle mode est visuellement une valeur ajoutée mais attention à ne pas en abuser, pour la fluidité de vos pages, mais aussi et surtout pour garder une certaine accessibilité et lisibilité. Le plus important étant toujours de passer le message.
L’équipe Synbioz.
Libres d’être ensemble.