Cette technique de conception est couramment utilisée dans les portefeuilles personnels ou les sites Web de studios de conception. Les barres de compétences représentent un niveau de connaissance lié à certaines tâches - conception de sites Web, illustration, stratégie de marque, création de personnages, et plus encore! L'ajout d'animations fantaisistes à ces barres de compétences fournira une connexion plus rapide au spectateur.
Dans ce tutoriel, je souhaite montrer comment vous pouvez créer des barres de compétences CSS3 à l'aide d'une animation par images clés. Il est également tout à fait possible d’exécuter en utilisant JavaScript, ce qui résisterait mieux dans les anciens navigateurs Web. Cependant, les images clés CSS3 gagnent en popularité avec un support beaucoup plus large de nos jours. Jetez un coup d'œil à ma démo en direct pour voir le produit final.
Live Demo - Télécharger le code source
Commencer
En parcourant Google, je suis tombé sur ce message décrivant le style d'animation CSS3. En fait, c'est assez simple une fois que vous avez compris les propriétés et la manière dont l'animation et les images clés fonctionnent ensemble. Ma page utilise un type de document HTML5 simple avec une seule feuille de style CSS externe.
Commençons par examiner le balisage HTML et la manière dont il construit une barre dynamique active. La page comprend deux sections différentes - une avec les étiquettes intérieures et une sans étiquettes. Comme toutes les barres de compétences utilisent un code presque identique, je n’ai copié que la première barre de la page.
La div #ensemble de compétences est utilisé pour encapsuler l'ensemble des compétences. Cela se comporte comme un wrapper afin que nous puissions tout centrer, augmenter / diminuer la largeur ou ajuster d’autres paramètres en CSS. La div intérieure avec une classe .compétence enveloppe chaque compétence individuelle mesurée. Dans ce cas, nous examinons le codage HTML5 / CSS3, qui est classé à 100% des connaissances.
L'en-tête H3 interne est en place afin que le spectateur puisse dire ce que la compétence mesure. Cela pourrait être placé à l'intérieur de la barre de compétences, mais j'ai choisi de mettre les années d'expérience à l'intérieur de la barre. Vous remarquerez que la barre animée elle-même est contenue dans une coque externe.
L'élément span .bar utilise un fond gris statique avec des effets d’ombre sur la boîte pour se démarquer sur la page. Il a été conçu de la même manière que l'exemple CSS Deck, mais j'ai essayé de simplifier un peu le code HTML. L'envergure intérieure .skillbar c'est là que se passe l'animation.
Animer les compétences individuelles
Vous remarquerez chacun .skillbar a également une classe secondaire liée à la compétence mesurée. Ceux-ci sont associés aux animations CSS3 qui s'exécutent sur des images clés. Chaque compétence est mesurée séparément et chacune s'arrête à un point différent (HTML / CSS arrive juste à atteindre 100%).
Puisque j'utilise des classes pour ces barres de compétences, nous pouvons les dupliquer plusieurs fois sur la page. Voici comment j'ai créé un autre ensemble d'exemples sur la même page - en réutilisant les mêmes classes animées. Comme ces barres contiennent également de petits morceaux de texte, elles ne peuvent pas commencer à une largeur de 0px. Normalement, c'est correct, mais dans ce cas, le texte se fendrait sur la ligne suivante et le texte ne se repositionnerait qu'une fois la barre animée.
Donc, avoir des classes individuelles signifie que je peux configurer la largeur d'origine pour qu'elle corresponde à la longueur du texte interne. De cette façon, il ne se casse jamais ni ne semble dérangé, et le texte reste toujours centré dans la barre de compétences, quelle que soit sa largeur.
Positionner les éléments
Mes propriétés CSS de base ne sont pas trop compliquées, mais certaines idées méritent d'être discutées. Je commencerai par la structure générale du conteneur de barres de compétences.
L'extérieur .bar Le conteneur utilise une valeur fixe largeur / hauteur pour que tout soit identique dans tous les navigateurs. L'intérieur .skillbar conserve une valeur de hauteur avec du texte, mais dans le deuxième exemple, ces éléments span n'apparaissent tout simplement pas car ils sont vides. Nous devons utiliser 100% de la hauteur sur toutes les barres de compétences internes pour nous assurer qu'elles apparaissent même sans contenu.
L'effet de texte centré est également très cool car le contenu interne s'anime en même temps que la barre. Vous pourriez ne pas aimer cet effet et c'est assez simple de changer l'alignement. Mais si vous considérez à quel point tout cela est facile, vous pourriez commencer à réfléchir à de nouveaux concepts à expérimenter.
Modes de remplissage d'animation
Lorsque j'ai commencé à animer les éléments, chaque barre finissait l'animation, puis revenait automatiquement à une largeur de 100%. Ce n'était évidemment pas mon intention alors je suis allé à la recherche d'une solution.
Je lisais que nous pouvons configurer une largeur par défaut sur la classe d'origine comme .htmlcss Donc, il finit à 100% de largeur une fois l'animation terminée? ou dans le cas de jQuery, la classe aurait besoin d'une largeur de 55%. Je pense que cela annule presque le but de copier deux fois la largeur. Ensuite, j'ai découvert les modes de remplissage, ce dont je n'avais jamais entendu parler auparavant.
Les modes de remplissage indiquent à l'animation comment utiliser les styles avant et après l'achèvement. En utilisant le mot-clé avant obligera chaque élément à conserver les styles CSS trouvés dans la dernière image clé. Donc, dans ce cas, nous exécutons une animation différente pour chaque classe et chaque animation a une position de départ de 0% suivie d'une position complétée à 100%. Je n'ai jamais su, une fois l'animation terminée, qu'elle reviendrait aux styles d'origine.
Si vous voulez en savoir un peu plus sur les modes de remplissage, consultez cet article de Mozilla qui approfondit les détails. Le concept est très simple, mais je peux comprendre qu'un nouveau développeur essayant des animations d'images clés CSS3 ne le sache pas.
Finalisation des images clés
Le dernier bloc de code que je souhaite partager sont les images clés elles-mêmes. Nous attribuons à chaque configuration d’image clé un nom unique qui est représenté par le animation Propriétés. J'utilise les préfixes CSS3 pour -moz et -webkit gérer la conformité avec autant de versions de navigateur que possible. Vous remarquerez que les animations sont divisées en blocs regroupés par le nom de l'animation:
Vous remarquerez également que chaque animation utilise uniquement une position de départ et une position terminée, qui doivent toutes être animées dans un délai de 1,5 seconde. Certaines positions de départ utilisent 35px ou 45px pour encapsuler complètement le texte de l'étiquette. Vous pouvez modifier cette valeur en 0px si vous ne souhaitez pas que du texte se trouve dans la barre de compétences elle-même.
À part ces styles, tout le reste devrait être assez connu. La dernière grande section de ma feuille de style redéfinit les dégradés intérieurs pour chaque barre de compétences. Sans étiquettes, vous pouvez essayer d'incorporer des couleurs pour différencier les compétences. C’est pourquoi les barres de compétences de mon ensemble secondaire incluent également un .alt classe.
Live Demo - Télécharger le code source
Fermeture
Il existe de nombreux autres didacticiels fantastiques sur ce sujet et d'autres animations d'images clés. Si vous avez le temps de chercher, vous trouverez de nombreux exemples de code intéressants sur des sites Web tels que CodePen et JSFiddle.Mes exemples avec des étiquettes de texte internes, ou simplement les pourcentages standard, peuvent fonctionner dans n'importe quelle conception de site Web similaire.
Soyez créatif avec ces animations pour voir comment elles pourraient s'intégrer dans d'autres projets Web futurs. Vous pouvez également télécharger le code source de mon tutoriel et essayer de créer des animations plus complexes.