Nouveau blog, nouveau design!

Il y a un mois, je publiais ce nouveau site regroupant presque l'intégralité de mon travail: publications sur mon blog et ailleurs, tutoriels CSS3, conférences, code...

Parmi les retours, certains m'ont demandé comment a été réalisé l'effet de la page d'accueil, à savoir la grille où les éléments apparaissent avec un effet 3D. Petit retour d'expérience.

La grille

Au départ, je voulais une grille d'éléments avec les contraintes suivantes:

• Chaque élément peut avoir une taille différente en hauteur. La largeur sera la même afin d'éviter de partir dans tous les sens et d'aider la lecture.
• Les éléments doivent êtres classés de haut en bas (par date dans mon cas), mais répartis dans des colonnes
• La grille doit être responsive et être définie en em

N'ayant pas trouvé de solution en CSS (même Flexbox est à la rue sur ce coup), j'ai commencé par m'intéresser à Masonry, dans sa version évoluée nommée Isotope. Après de nombreux tests, il s'est avéré que le résultat obtenu n'était pas parfait:

• pas de responsive propre par défaut et pas évident à mettre en place du au coté automagique d'Isotope
• code assez lourd et dépendant de jQuery
• par défaut, le positionnement des éléments de la grille se fait avec les transformations CSS, mais ayant besoin de ces transformations pour mon effet visuel, cela devenait très contraignant. Le mode sans transformations utilise le positionnement absolute avec top et left et provoque donc quelques problèmes de performance

Ensuite, j'ai également testé Salvattore. C'est une petite librairie basée sur les breakpoints définis depuis les media-queries CSS. Le concept semble super, mais là encore, le résultat n'a pas été optimal et le code encore jeune contenait quelques bugs irrésolus (cela s'est peut-être arrangé depuis).

J'ai donc choisi de développer mon propre script, que vous pouvez retrouver sur GitHub: Greeed. Ce script ultra-minimaliste s'adapte parfaitement à mon problème mais je ne suis pas sur qu'il s'adapte facilement ailleurs. Si jamais vous voulez le tester, n'hésitez pas à me faire des retours!

Pour faire simple, ce script prends une liste d'éléments et les répartis en colonnes en fonction du nombre de breakpoints définis en em.

L'effet 3D

L'effet en question consiste à faire apparaître les éléments de la grille à partir du moment où ils entrent dans la fenêtre. Les apparitions utilisent les transformations 3D et les transitions CSS.

Pour ce faire, j'ai tester et décortiquer Stroll.js. Si vous ne connaissez pas cette librairie, je vous propose de regarder les effets visuels sur la page de démonstration, c'est vraiment bluffant!

Cependant, après avoir mis en place cette solution, j'en suis arrivé aux conclusions suivantes:

• l'élément parent doit avoir un overflow:hidden, ce qui empêche le défilement normal de la page
• sur mobile (ou tactile plutôt), il est impossible de cliquer sur des liens au sein des éléments (les événements touch* étant réservés à la reconstruction du scroll)
• sur mobile basse performance (hors dernières générations), le résultat est très lent, voire inutilisable

Là encore, j'ai décidé d'utiliser mon propre script, plus léger, inspiré par Stroll.js. Le concept est simple: j'ajoute des classes HTML aux éléments qui se trouvent avant (.past), après (.future) ou au sein du viewport (.inside). Ensuite, c'est le CSS qui se charge du reste. Dans mon cas, cela donne:

.item {
    opacity: 1;
    transform-origin: 50% 0;
    transform: perspective(500px) rotateX(0) translateY(0) translateZ(0);
    transition: transform .3s, opacity .3s;
}
.item.past {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: perspective(500px) rotateX(90deg) translateY(-10em) translateZ(0);
}
.item.future {
    opacity: 0;
    transform: perspective(500px) rotateX(-90deg) translateY(10em) translateZ(0);
}

Sur mobile, un problème de déclenchement d'événement scroll et de performance m'ont conduit à désactiver l'effet 3D (après de nombreux essais).

Le script se trouve également sur GitHub: Heeere!

Coté technique

L'intégralité du site est basé sur Kirby, un CMS écrit en PHP basé sur des fichiers textes et sans bases de données. C'est extrêmement puissant et vraiment pratique. Son seul inconvénient étant son prix, 30$ par site.

Les fichiers statiques sont versionnés sur GitHub (vous pouvez d'ailleurs ouvrir des bugs là-bas) et un hook post-receive se charge du déploiement automatique. Ces fichiers sont ensuite compilés avec Brunch et ses tâches par défaut. J'y ai juste ajouté Autoprefixer pour l'ajout des préfixes CSS de manière automatique et ImageOptimizer pour le traitement des images.

Cette refonte m'a également permis de tester SVG, mais je vous en parlerais dans un autre billet, tellement il y a de choses à dire sur ce sujet. :)