Tutoriel JavaScript & CSS : Portfolio en grille

Dans cette vidéo je vous propose de découvrir comment créer un système de portfolio en grille. Le principe est de présenter les différentes réalisations sous forme d'une mosaïque, et lorsque l'on cliquera sur une des réalisations une description s'affichera en dessous sans perturber les autres éléments.

Comme vous allez le voir, avec les nouveautés du CSS (notamment l'apparition du système de grille) il va être très facile de mettre en place ce système.

Le display grid

Pour créer cet effet on utilisait jusqu'à maintenant le système de float. Le problème était alors que lorsque l'on dépliait une description, les éléments situés après allaient se placer en dessous. Grâce au nouveau système de grille il est possible de déployer l'élément juste après l'élément sélectionné sans forcément l'agencement des autres éléments.

.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 20px;
  grid-auto-flow: row dense;
}

Le système grid-auto-flow: row dense; permet de demander aux éléments de se placer dans les cases libres de notre grille. Ainsi si on décide d'afficher une description sur toute la largeur les éléments ne vont pas être décalés mais vont se placer dans les cases restantes (même si elles se situent avant l'élément courant). Ceci permet de ne pas avoir à penser notre structure HTML en fonction de l'effet que l'on souhaite donner. On va pouvoir directement placer notre description juste après l'élément qui a été sélectionné.

Et si je veux utiliser les flexbox

Le support du système de grille n'étant pas encore complet, si vous souhaitez utiliser les flex on aura alors la même problématique qu'avec les float. Si on affiche notre élément après l'élément sélectionné, les réalisations situées après la description vont alors être décalées sur une nouvelle ligne. Pour éviter ce problème il va falloir insérer notre description à la fin d'une ligne. Il faudra donc trouver l'élément situé en fin de ligne afin d'ajouter notre contenu après.
Pour cela on peut se baser sur le système d'offset et trouver la position des éléments par rapport au haut de la fenêtre. L'élément qui a une position différente de l'élément actuellement sélectionné est situé à la ligne suivante. Une fois que l'on a identifié cet élément il suffit d'insérer notre description avant.

class PortfolioFlex extends Portfolio {

  injectContent (child, content) {
    let index = this.children.findIndex(c => c === child)
    let offsetTop = child.offsetTop
    let i
    for (i = index; i < this.children.length; i++) {
      if (this.children[i].offsetTop > offsetTop) {
        break
      }
    }
    this.children[i - 1].after(content)
  }

}

Animer le scroll

Enfin, un autre effet que l'on souhaite mettre en place est l'animation du défilement.
Heureusement pour nous une nouvelle méthode est disponible au niveau du JavaScript. De nouvelles spécifications sont en train d'apparaître pour la méthode scrollTo. Cette méthode peut maintenant prendre un seul paramètre d'option.

  /**
   * Fait défiler la fenêtre jusqu'à l'élément
   * @param {HTMLElement} element
   * @param {int} offset
   */
  scrollTo (element, offset = 0) {
    window.scrollTo({
      behavior: 'smooth',
      left: 0,
      top: element.offsetTop - offset
    })
  }