Contenu
En combinant à la fois l'animation et les transitions CSS3, nous utiliserons CSS pour animer une infographie de la chronologie. Pour que les données se déplient au fur et à mesure que vous faites défiler la chronologie, chaque animation est déclenchée via le plugin inview jQuery lorsqu'elle apparaît. Nous examinerons les composants des trois principales animations auxquelles nous appliquons chaque année dans la chronologie.
Chaque infographie raconte une histoire. J'ai choisi l'histoire de la façon dont le Web Design Day, la conférence que je dirige, s'est développée au cours des quatre dernières années pour mon infographie. Ce sont les données que nous utiliserons dans notre exemple de projet.
Les extraits de code du didacticiel montrent la syntaxe W3C sans préfixe pour toutes les propriétés CSS3 pour une lecture plus facile. Le CSS final dans les fichiers d'exemple a tous les préfixes nécessaires grâce à l'autoprefixer. Notez également que les fichiers de démonstration doivent être exécutés sur un serveur Web (local via quelque chose comme MAMP, ou transmis par FTP à votre hôte Web) pour s'exécuter correctement.
Avant de coder l'une des animations, réfléchissez aux données les plus intéressantes et à la sensation générale que vous souhaitez obtenir. Pour la Journée de la conception Web, le nombre total de participants, ainsi que la distance la plus éloignée parcourue par un participant pour y assister, étaient des points intéressants à comparer. Les graphiques à barres illustrant des choses comme le nombre de hot-dogs consommés sont amusants. L'histoire est claire dans le sujet, les couleurs du design sont donc lumineuses et ludiques, tout en conservant un style cohérent.
Au fur et à mesure que nous faisons défiler chaque année, la date apparaît pour marquer un point sur la chronologie. Pour les mettre en mouvement, nous commençons par écrire un ensemble d'images clés qui décrivent l'animation que nous voulons voir. Après quelques essais et erreurs et avoir joué sur CodePen, je suis arrivé à ceci:
@keyframes popIn {0% {transform: scale (0);} 70% {transform: scale (1.05);} 100% {transform: scale (1);}}
Notre entrer brusquement l'animation commence par un transformer mise à l'échelle de notre élément à une taille de 0, ce qui le rend essentiellement invisible pour commencer son entrée. Ensuite, à 70% du parcours de l'animation, nous attribuons une échelle de 1.05, qui affichera notre élément juste un peu plus grand que son assigné 110px diamètre. Enfin, il s'installe à sa vraie taille assignée, une échelle de 1, à la dernière image clé de notre animation (100%). Cette déclaration d’image clé n’animera rien à elle seule. L'animation doit être affectée à un élément pour prendre effet, en utilisant le .date-anim-in classer:
.date-anim-in {animation: popIn .4s cubic-bezier (0.6, -0.28, 0.735, 0.045) les deux; }
Tout élément que nous attribuons au .date-anim-in la classe prendra le entrer brusquement animation, prenez 0,4 seconde pour terminer l'animation, utilisez le fonction de synchronisation d'animation propriété définie dans notre cubique-bezier fonction et avoir un mode de remplissage d'animation de tous les deux.
Notez que dans notre HTML, nous avons uniquement attribué la classe de .Date à notre marqueur d'année, pas au .date-anim-in classe que nous venons de créer. Nous attribuerons le .date-anim-in en utilisant dynamiquement jQuery pour contrôler exactement quand le entrer brusquement L'animation s'exécute. Sans écrire de CSS supplémentaire, nous pourrons également le réutiliser pour animer les autres marqueurs de date, ou même d'autres éléments entièrement si nous le souhaitons. Notre animation de date est définie et prête à être utilisée!
L'animation du graphique à barres
Notre diagramme à barres illustre le nombre de chiens végétariens, de hot dogs et de pierogi consommés au déjeuner chaque année. le largeur de chaque barre s'anime à sa longueur totale tandis que l'étiquette illustrée pour chaque mesure s'estompe au fur et à mesure que les barres se développent. Le mouvement d'expansion est obtenu avec une transition CSS et une imbrication intelligente. Une animation CSS est utilisée pour le fondu. Il y a un peu de tout ce qui se passe dans cette animation!
Tout d'abord, le code HTML de chaque barre de notre graphique à barres est structuré comme suit:
div> div> / div> div> span> 24 / span> br /> img src = "img / vegdog.svg" alt = "veggie dogs" /> / div> / div>
Chaque aliment contient un div> qui représentera sa barre dans le graphique à barres ainsi qu'un div> avec son étiquette. Il y a un autre span> autour du nombre total de chaque élément afin que nous puissions facilement le retirer avec jQuery pour attribuer la largeur à chaque barre plus tard. Cela permet de garder l'animation que nous créons réutilisable dans le graphique à barres de chaque année. Le CSS derrière le mouvement de chaque graphique est exactement le même, même si les données ne le sont pas. le div>s avec la classe de .veg, .pierogi et .de viande déterminera la largeur de chaque section du graphique. Chaque enfant .bar div> se voit attribuer la largeur de 100% dans notre CSS:
.bar {largeur: 100%; hauteur: 2rem;}
Maintenant, nous pouvons modifier le moment de la croissance de chaque barre de notre graphique en attribuant une transition à l'élément parent (.veg, .pierogi, et .de viande). Pour un effet maximal, les barres se dilatent dans l'ordre et semblent se développer les unes sur les autres: d'abord .veg, ensuite .pierogi, ensuite .de viande. Ceci est réalisé en attribuant une propriété de transition à chacun et en échelonnant la quantité de retard associée:
.veg {index-z: 100; largeur: 0; transition: largeur .5s facilité d'entrée;} .pierogi {z-index: 50; largeur: 0; transition: largeur .75s facilité d'entrée .2s;} .meaty {largeur: 0; transition: largeur 1s facilité d'entrée .2s;}
Les trois sections du graphique à barres ont une largeur initiale de 0 pour commencer et un z-index défini pour préserver l'ordre visuel des couches. Par example, .veg obscurcira la transition se produisant sur .pierogi jusqu'à ce qu'il passe à une largeur plus large que le .veg div> superposé au-dessus. Chaque section a également une transition pour sa largeur avec une durée légèrement différente (le premier chiffre de la sténographie) et un délai (le deuxième chiffre de la sténographie) pour créer l'effet d'expansion en quinconce. Lorsque la largeur totale est attribuée à chacun de ces div>s via jQuery, les transitions sont déclenchées et l'enfant .bar L'élément grandira avec chacun.
Le texte et l'image de notre étiquette imbriquée obtiennent leur mouvement de la même manière. Notre div> avec la classe de label (contenant à la fois le texte et l'image) est absolument positionnée à droite de son élément parent. Au fur et à mesure que l'élément parent se développe via sa transition, l'étiquette se déplace également avec lui. C’est une transition qui travaille dur!
Il y a encore une chose que je voulais ajouter à l'animation du graphique à barres extensible. C'était vraiment distrayant de voir les images et le texte des étiquettes empilés maladroitement les uns sur les autres vers le début de l'animation alors que les trois barres avaient presque la même largeur. Les étiquettes se chevauchaient et semblaient déformées jusqu'à ce que les barres se dilatent un peu. Pour aider à minimiser le chevauchement visuel, j'ai ajouté une animation pour fondre dans chaque étiquette pendant que les barres se développaient.
Les images clés de l’animation FadeUp commencent par une opacité de 0 et se terminent par une opacité de 1. Nous avons également quatre classes différentes prêtes à attribuer cette animation dans diverses configurations. (Nous utiliserons ces classes de la même manière que le .date-anim-in classe discutée précédemment.)
@keyframes fadeUp {de {opacity: 0;} à {opacity: 1;}} .fade-down {animation: fadeUp .15s easy-out inverse les deux; } .food1 .label {animation: fadeUp 0.5s relâchement 0,75s les deux; } .food2 .label {animation: fadeUp 0.5s easy-out 1s les deux; } .food3 .label {animation: fadeUp 0.5s facilité de sortie 1.25s les deux; }
le .fade-down la classe peut sembler un peu drôle au début. Nous attribuons l'animation de fondu mais aussi en définissant le animation-direction propriété à inverser via la sténographie. Cela exécutera les images clés dans l’ordre inverse de la liste (opacité de 1 à une opacité de 0). Ainsi, nous pouvons utiliser cet ensemble d'images clés pour faire fondre les éléments vers l'intérieur ou vers l'extérieur, en fonction de la animation-direction nous fixons. Ce n'est pas tout! Nous créons trois classes supplémentaires à utiliser pour le fondu de nos étiquettes de graphique à barres. Nous utilisons le même fondu images clés sur chacun, mais avec un retard d'animation valeur pour chacun.
Lorsque nous attribuons le .food1, .food2 et .food3 classes via jQuery, les étiquettes de chacune seront attribuées à notre fondu animation avec des délais échelonnés. Nous les verrons disparaître un par un. En créant différentes configurations des propriétés d'animation, vous pouvez obtenir beaucoup de kilométrage à partir d'une seule déclaration d'image clé. Cette réutilisabilité est l'une de mes fonctionnalités d'animation CSS préférées.
La quantité de café bu à la conférence demandait à être affichée de façon spectaculaire dans cette infographie. Chaque image de tasse à café représente deux tasses de café consommées pour éviter que les choses ne deviennent trop accablantes visuellement. Les tasses à café se mettent en place avec un peu de ressort et apparaissent avec un timing décalé. Nous accomplissons cela avec des transformations 3D animées et une poignée de nième de type des règles.
Pour donner l'impression que les tasses à café tournent dans l'espace 3D, nous les ferons pivoter autour de l'axe y. Les éléments HTML manquent de profondeur, donc les coupes sont essentiellement des cartes postales dans l'espace: elles ont un recto et un verso, mais si nous les regardons de côté, elles sont essentiellement invisibles car elles sont infiniment minces. Les images clés de notre animation ressemblent à ceci:
@keyframes swingIn {0% {transform: rotateY (90deg); fonction de synchronisation d'animation: cubic-bezier (0.895, 0.03, 0.685, 0.22);} 5% {opacité: .5; fonction de synchronisation d'animation: linéaire;} 60% {transform: rotateY (-20deg); fonction de synchronisation d'animation: cubic-bezier (0,165, 0,84, 0,44, 1);} 100% {opacité: 1; transformation: rotateY (0deg);}}
Nous définissons également le perspective propriété sur notre élément parent pour être sûr que toutes nos tasses à café tournent en utilisant la même perspective:
ul.cups {perspective: 800; …}
Au cours de cette animation, l'opacité et la rotation des tasses à café sont affectées à des rythmes différents. Cela commence par une rotation de 90 degrés autour de l'axe y, ce qui signifie que notre image fine comme du papier pivote et ne peut pas être vue. Il se termine par une rotation de 0 degré, ce qui signifie qu’il est plat par rapport à l’écran. Il tourne au-delà de sa position finale pour créer ce petit rebond en place.
le fonction de synchronisation d'animation est également défini différemment entre les images clés pour maximiser la «vivacité» du mouvement. Vous ne pouvez pas animer le fonction de synchronisation d'animation propriété, mais vous pouvez la définir sur des valeurs différentes entre les images clés, comme nous l'avons fait ici. le fonction de synchronisation d'animation défini dans notre 0% l'image clé sera utilisée entre les 0% et 5% images clés et ainsi de suite à travers nos images clés à chaque nouvelle fonction de synchronisation d'animation La propriété est déclarée dans une règle d'image clé.
Semblable à la fondu animation pour les étiquettes du graphique à barres, l'animation pour les tasses à café est affectée au li>s dans chaque liste, en utilisant un certain nombre de classes. Dans ce cas, étant donné que le nombre total de tasses à café varie énormément, le : nième de type le sélecteur de pseudo-classe est utilisé pour attribuer différents retard d'animation valeurs de propriété de la tasse à café li>s par groupes de 10. Au fur et à mesure que la liste des tasses à café apparaît, chaque li> se verra attribuer la classe de .swing-in via jQuery. le : nième de type les règles de notre CSS détermineront les propriétés d'animation attribuées à chaque tasse de café individuelle li>:
.swing-in: nth-of-type (2n + 1) {animation: swingIn 0.9s 0.75s; }
Ces classes utilisent le .swing-in classe pour définir un ordre pour les éléments à prendre sur le swingIn animation. Les éléments ont également des valeurs variables pour retard d'animation propriété (le deuxième chiffre de la sténographie). Celles-ci se chevauchent, provoquant l'animation des tasses à café par groupes de 10, donnant à l'animation un aspect presque rayé, car les tasses apparaissent toutes après avoir attribué une classe. J'ai utilisé une boucle Sass pour créer ces règles avec des quantités incrémentielles de retard d'animation. Jetons maintenant un coup d'œil au JavaScript qui s'occupe de la logique et joue le rôle principal dans toutes nos animations et transitions CSS dans notre infographie.
Déclencher les animations
Chacune de nos animations doit être déclenchée au fur et à mesure de son affichage en fonction de la distance parcourue sur la page. Il existe un certain nombre de bibliothèques et de scripts qui peuvent nous fournir ce type d'informations. J'ai choisi d'utiliser le plug-in inview jQuery. Ce plug-in peut déclencher un événement chaque fois qu'un élément particulier se trouve dans la zone de fenêtre visible. À l'aide de cet événement, j'attribue les classes CSS contenant mes propriétés d'animation lorsque l'élément en question est visible, puis je le supprime lorsqu'il ne l'est pas. Les animations CSS s'exécutent lorsqu'elles sont affectées. Ainsi, l'ajout et la suppression d'une classe avec des propriétés d'animation de cette manière relancent essentiellement une animation à chaque fois qu'elle est ajoutée. C’est exactement ce que je veux faire ici. Souvenez-vous de notre .date-anim-in classe qui avait les propriétés d'animation que nous voulions que nos marqueurs de date utilisent? Nous pouvons l’attribuer au marqueur de chaque année au fur et à mesure qu’il apparaît, comme ceci:
$ (". date"). bind ('inview', function (event, visible, visiblePartX, visiblePartY) {if (visible) {$ (this) .addClass ('date-anim-in');} else {$ (this) .removeClass ('date-anim-in');}});
En utilisant le plug-in inview, nous recherchons un div> avec la classe de .Date et ajoutez le .date-anim-in classe lorsqu'elle est signalée comme étant visible. Une fois ajoutées, les propriétés d'animation associées sont appliquées et notre marqueur de date s'anime avec le entrer brusquement animation. Lorsqu'il n'est pas visible, le .date-anim-in la classe est supprimée. le .date div> revient à ses styles intrinsèques et nous sommes prêts à réattribuer le .date-anim-in classe quand il revient en vue. Nos marqueurs d'année apparaissent maintenant alors que nous faisons défiler la chronologie. Alors que les tasses à café sont contrôlées de la même manière, les animations de graphique à barres ont plus à faire:
$ (". nine .food"). bind ('inview', function (event, visible, visiblePartX, visiblePartY) {if (visible) {$ (". nine .veg"). removeClass ('fade-down') .addClass ('food1'). css ('width', $ (". nine .veg .label span"). text () * 2); $ (". nine .pierogi"). removeClass ('fade- down '). addClass (' food2 '). css (' width ', $ (". nine .pierogi .label span"). text () * 2); $ (". nine .meaty"). removeClass ( 'fade-down'). addClass ('food3'). css ('width', $ (". nine .meaty .label span"). text () * 2);} else {$ (". nine. veg "). toggleClass ('fade-down food1'). css ('width', '0px'); $ (". nine .pierogi "). toggleClass ('fade-down food2'). css ('width' , '0px'); $ (". Nine .meaty"). ToggleClass ('fade-down food3'). Css ('width', '0px');}});
Dans ce cas, comme notre .aliments section pour chaque année devient visible, nous apportons trois changements à chacun des trois aliments représentés dans notre diagramme à barres. Tout d'abord, nous supprimons la classe .fade-down à partir de lui (si c'est là). Par exemple, si nous revenions en arrière dans notre infographie, le .fade-down la classe serait appliquée aux graphiques que nous avons déjà parcourus. Suivant le .food1 (ou alors .food2 ou alors .nourriture3) la classe est ajoutée. C'était la classe qui était associée à notre retard échelonné fondu animations. Enfin, nous attribuons une largeur à notre aliment en fonction du nombre total emballé dans le span> pour déclencher la transition que nous avons définie plus tôt. D'un autre côté, lorsque la section .food n'est plus visible, nous inversons l'attribution du cours et définissons le largeur à 0 afin qu'il soit prêt à jouer à nouveau s'il revient en vue. Et avec ça, notre infographie est entièrement animée!
Mots: Tête de Val
Cet article a été initialement publié dans le numéro 246 du magazine net.
