Catégories
Astuces et Design

L'effet de repli de Mad Magazine en CSS

Après 65 ans au Mad Magazine, le dessinateur de bandes dessinées Al Jaffee a annoncé sa retraite. Jaffee était surtout connu pour ses Mad Fold-Ins, où le pliage de la page révélerait un message caché dans l'œuvre d'art. De nombreux exemples peuvent être trouvés sur le Web. Le problème est qu'ils montrent tous statiquement l'avant et l'après côte à côte, ce qui diminue la magie (voir ici et ici). Il y a toute une génération qui n'a peut-être vu que les dépliants dans ce format.

Bien sûr, j'ai dû créer l'effet de pliage de papier pour le Web. Il existe différentes manières d'y parvenir, mais cette approche est intéressante car:

  • Il s'agit uniquement de CSS, ne reposant sur aucun JavaScript.
  • Utilise une seule image au lieu d'exiger la découpe de l'image dans Photoshop.
  • Peut être configuré avec simplement HTML en définissant des variables CSS dans un attribut de style.

Voici une démo en action, utilisant des illustrations de Johnny Sampson dans un numéro qui a célébré le 98e anniversaire de Jaffee. Survolez ou appuyez pour plier.

Et un autre par Jaffee lui-même.

Le code

Le code HTML de l'effet est assez simple. Vous vous interrogez peut-être sur l'élément d'image autonome – il est masqué mais utilisé pour définir la taille et le rapport hauteur / largeur du composant. Le chemin de l'image y est spécifié et à nouveau comme une variable CSS pour définir l'image d'arrière-plan des autres éléments.



  
  
    
    
  
  


Et voici le CSS utilisé pour définir le positionnement, les transformations 3D et les transitions.


.jaffee {
  position: relative;
  display: inline-flex;
  transform: rotateX(10deg); 
  transform-style: preserve-3d;
  cursor: grab;
}

.jaffee img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56vh;
  opacity: 0;
}

.jaffee .a,
.jaffee .b,
.jaffee .c {
  top: 0;
  display: inline-block;
  height: 100%;
  background-image: var(--bg);
  background-size: cover;
  background-repeat: no-repeat;
}

.jaffee .a {
  position: absolute;
  left: 0;
  width: 50%;
  background-position: 0 0;
}

.jaffee .bc {
  position: absolute;
  display: inline-flex;
  width: 50%;
  height: 100%;
  left: 50%;
  transform-origin: left;
  transition: transform 3s;
  transform-style: preserve-3d;
}

.jaffee .b,
.jaffee .c {
  position: relative;
  width: 50%;
  backface-visibility: hidden;
}

.jaffee .b {
  background-position: 66.666667% 0;
  transform-style: preserve-3d;
}

.jaffee .b:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: rotateY(180deg) translateZ(1px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.jaffee .c {
  background-position: 100% 0;
  transform-origin: left;
  transition: transform 2s;
}

.jaffee:hover .bc,
.jaffee:active .bc {
  transform: rotateY(-180deg) translateZ(-1px);
  transition: transform 2s;
}

.jaffee:hover .c,
.jaffee:active .c {
  transform: rotateY(180deg) translateZ(2px);
  transition: transform 3s;
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *