Il a 6 faces, 12 arêtes et 8 sommets, oui je vais vous parler d’un cube !

J’ai réalisé un cube configurable grâce au mixed mode du framework famous (et l’aide de collègues pour certains calculs mathématiques). Vous pouvez trouver les sources sur github et customiser votre propre cube assez facilement. Je vais vous expliquer sans plus attendre comment faire.

Tout d’abord clonez le repo puis passer sur la branche cube

git clone https://github.com/AdFabConnect/animation.git
git checkout -b cube

Dans cet article je vais seulement traiter la partie customisation qui nécessite seulement de connaitre HTML et css. Pour ceux qui connaissent le javascript (es2015) et famous, vous pouvez aller encore plus loin en compilant les sources avec la commande suivante.

famous.dev

Pour modifier le cube allez dans le dossier ./public et ouvrez le fichier index.html

Ici se trouve la configuration du cube :

var FACE_STEP = ['FRONT', 'LEFT', 'BACK', 'RIGHT', 'TOP'];

var CUBE_CONFIG = {
    cube_size: 300,
    camera_depth: 3000,
    transition_duration: 1500,
    face_wait: 2000,
    scale_back: .90,
    transition_scale: .75
};

La variable FACE_STEP permet de configurer la rotation automatique du cube. Donc au chargement le cube commencera sur la face FRONT, puis LEFT, BACK, RIGHT et enfin TOP. Il est possible d’ajouter autant d’entrée dans le tableau pour faire tourner le cube a l’infini.

La variable suivante CUBE_CONFIG va nous permettre de modifier la configuration de notre cube.

• cube_size, la taille du cube
• camera_depth, la profondeur
• transition_duration, le temps de transition entre chaque face
• face_wait, le temps d’attente entre chaque face
• scale_back, le scale pour le cube en arrière plan
• transition_scale, et le scale pendant une transition

Maintenant ça serait bien de pouvoir changer l’apparence des faces du cube. Voici comment faire.

<div data-face="front">
    <style>
    .face-front-wrapper {
        background: #2ecc71;
    }
    .face-front-wrapper div {
        width: 100%; height: 100%; line-height: 3.5; color: black; text-align: center; font-size: 70px; border: 1px solid #000;
    }
    </style>
    <div>FRONT</div>
</div>

L’attribut data-face permet d’indiquer dans quelle face sera injecté notre code html.
Nous allons y ajouter du html

<div>FRONT</div>

et du css (je vous conseille de plutôt utiliser une feuille de style externe)

.face-front-wrapper {
  background: #2ecc71;
}
.face-front-wrapper div {
  width: 100%;
  height: 100%;
  line-height: 3.5;
  color: black;
  text-align: center;
  font-size: 70px;
  border: 1px solid #000;
}

Pour des raisons de confort j’ai ajouté la possibilité de pouvoir cliquer sur un élément du DOM pour tourner le cube sur une face définie. Il vous suffit d’utiliser l’attribut data-rotate.

<button data-rotate="LEFT">Go to left face</button>

Au click sur ce bouton le cube tournera automatiquement sur la face gauche.

Une face spéciale a été définie, elle s’appelle GOBACK et permet de pousser vers le fond le cube. (rappelez-vous la configuration scale_back). Il vous faudra pour cela utiliser l’attribut data-face plus data-rotate.

<button data-rotate="GOBACK" data-face="LEFT">Go to bottom face</button>

Voici à quoi ressemble l’action précédente au clic sur le bouton :

Enfin quand le cube se trouve en position éloignée il est possible de bouger celui-ci grâce à la souris.

Nous verrons dans un autre article comment j’ai réalisé le cube avec le mixed mode de famous.

En bonus le codepen du projet :