Comment faire pour créer des animations Windows 8 avec CSS3 et jQuery

windows 8
voir la démo Télécharger sur Github

 

J’ai commencé à utiliser Windows 8 depuis un bon moment maintenant, ce qui m’a bluffé c’était les animations de windows 8.
Et du coup je me suis demandé si on pourra faire cela en CSS c’est-à-dire recréer les animations et les effets. Donc voici un tutoriel sur la transformation 3D.

Il faudrait noter que la démo ne fonctionne que sur les navigateurs qui supportent les propriétés CSS3 3D transformation.

La structure

La structure de la la démo est assez simple: on aura une liste de tuiles avec tailles différentes (petit, grand, très grand) qui float à l’intérieur de trois colonnes.

Au clic sur un des tuiles un lightbox s’affichera sur la page et qui représentera une application sur le bureau.

Il existe deux types de transitions pour l’affichage du lightbox, soit il s’ouvre avec un effet de rotation 3D de droite vers la gauche ou de la gauche vers la droite qu’on représentera par des classes : s-page ou r-page

Maintenant pour chaque tuile, nous devons spécifier quel type de lightbox qu’il ouvrera pour cela il suffit de mettre un attribut data-page-type. Pour les tuiles nous allons les animer un peu plus tard.

Coté JavaScript on va obtenir le nom et le type de lightbox à afficher quand une tuile est cliqué.

Le css

Tout d’abord, nous allons définir les styles généraux afin d’avoir un rendu 3D.

La première animation sur le tableau de bord est déclenchée lorsque la page se charge, il sera d’abord caché puis un effet fondu s’appliquera au chargement de la page.

Quand une tuile est cliqué un effet fadeout s’opère sur le tableau de bord et se réduit en arrière le long de l’axe z et son opacité passe progressivement jusqu’à 0.
Et quand on ferme le lightbox, le tableau de bord reprend sa place.

Voici les classes et les animations appliquées au tableau de bord lorsqu’ on clic sur les tuiles et lors de la fermeture du lightbox:

Maintenant, nous allons styliser le lightbox

Toutes les pages, sauf le lightbox de type s-page ont la même position initiale dans l’espace 3D.
Les s-page sont positionnés -150% à gauche du plan et est caché de sorte qu’ils glissent dans la vue lorsque l’animation est lancé.

Une fois qu’on clic sur une tuile une classe correspondante est ajouté (via javascript) au lightbox, et chaque classe correspond à une animation.
Ce sera les noms de classe qui déclencheront l’ouverture et la fermeture des lightbox, ainsi que les animations qui lui seront défini.

Ainsi, afin de garder la page ouverte, et être capable de créer des animations séquentielles, l’élément doit rester dans l’état final défini par la première animation, et de là commence la deuxième animation.

Voici les animations pour les classes appliqué aux pages:

Enfin, nous allons styliser les tuiles en les définissant les transitions et les animations qui leur sont appliquées au hover.
Styles générales définissant la taille des tuiles

Pour glisser le texte d’une tuile vers le haut, nous allons appliquer une classe slideTextUp .

De même, les tuiles avec le texte qui glisse de la droite vers la gauche, auront des noms de classe slideTextLeft et slideTextRight

Pour l’effet de retournement, appliquer une Rotate3D classe à la tuile que vous voulez retourner.

Le javascript

Tous les événements de clic seront traités avec jQuery.
Un gestionnaire d’événements va détecter chaque clic et récupère le nom et le type de la page correspondante à l’aide des attributs data-page-type et data-page-name

Une réponse à “Comment faire pour créer des animations Windows 8 avec CSS3 et jQuery”

  1. Simsimangel

    Magnifique! Un très bon travail, bonne continuation.

    Répondre

Répondre