Esta técnica de diseño se encuentra comúnmente en portafolios personales o sitios web de estudios de diseño. Las barras de habilidades representan un nivel de conocimiento relacionado con ciertas tareas: diseño web, ilustración, marca, diseño de personajes, ¡lo que quieras! Agregar algunas animaciones extravagantes a estas barras de habilidades proporcionará una conexión más rápida al espectador.
En este tutorial quiero demostrar cómo puedes construir barras de habilidades CSS3 usando la animación de fotogramas clave. Esto también es completamente posible ejecutarlo con JavaScript, lo que se mantendría más sólido en los navegadores web más antiguos. Sin embargo, los fotogramas clave de CSS3 están creciendo en popularidad con un soporte mucho más amplio en estos días. Eche un vistazo a mi demostración en vivo para ver el producto final.
Demo en vivo - Descargar código fuente
Empezando
Mientras navegaba por Google, me topé con esta publicación, destacando el estilo de animación CSS3. En realidad, es bastante simple una vez que entiendes las propiedades y cómo las animaciones / fotogramas clave funcionan juntos. Mi página utiliza un doctype HTML5 simple con una única hoja de estilo CSS externa.
Primero deberíamos echar un vistazo a la marca HTML y cómo esto construye una barra dinámica activa. La página incluye dos secciones diferentes, una con etiquetas internas y otra sin etiquetas. Como todas las barras de habilidades usan un código casi idéntico, he copiado solo la primera barra de la página.
El div #Conjunto de habilidades Se utiliza para encapsular toda la colección de habilidades. Esto se comporta como un contenedor, por lo que podríamos centrar todo, aumentar / disminuir el ancho o ajustar otras configuraciones en CSS. El div interior con una clase. .habilidad envuelve alrededor de cada habilidad individual que se mide. En este caso, estamos viendo la codificación HTML5 / CSS3 que se clasifica al 100% de conocimiento.
El encabezado H3 interno está en su lugar para que el espectador pueda decir lo que la habilidad está midiendo. Esto podría colocarse dentro de la barra de habilidades, pero elegí poner los años de experiencia dentro de la barra. Notará que la barra animada está contenida dentro de una capa externa.
El elemento span .bar utiliza un fondo gris estático con algunos efectos de sombra de caja para destacar en la página. Fue diseñado de manera similar al ejemplo de la cubierta CSS, pero he tratado de simplificar un poco el HTML. El lapso interior .skillbar Es donde ocurre la animación.
Animar habilidades individuales
Notarás cada uno .skillbar También tiene una clase secundaria relacionada con la habilidad que se mide. Estos se adjuntan a las animaciones CSS3 que se ejecutan en fotogramas clave. Cada habilidad se mide por separado y cada una se detiene en un punto diferente (HTML / CSS simplemente llega al 100%).
Ya que estoy usando clases para estas barras de habilidades, podemos duplicarlas muchas veces en la página. Así es como creé otro conjunto de ejemplos en la misma página, reutilizando las mismas clases animadas. Dado que estas barras también contienen pequeños bits de texto, no pueden comenzar con un ancho de 0px. Normalmente esto está bien, pero en este caso el texto se rompería en la siguiente línea, y solo una vez que la barra se anime, el texto se reposicionará.
Por lo tanto, tener clases individuales significa que puedo configurar el ancho original para que coincida con la longitud del texto interno. De esta manera, nunca se rompe o aparece con errores, y el texto siempre se mantiene centrado en la barra de habilidades, sin importar qué tan ancho se anime.
Posicionando los elementos
Mis propiedades básicas de CSS no son demasiado complicadas, pero hay algunas ideas que vale la pena discutir. Comenzaré con la estructura general del contenedor de barras de habilidades.
El exterior .bar el contenedor utiliza un valor de ancho / alto fijo para garantizar que todo se vea igual en todos los navegadores. El interior .skillbar mantiene un valor de altura con el texto, pero en el segundo ejemplo, esos elementos de rango simplemente no aparecerían porque están vacíos. Necesitamos usar el 100% de altura en todas las barras de habilidades internas para asegurarnos de que aparezcan incluso sin ningún contenido.
El efecto de texto centrado también es bastante bueno porque el contenido interno se animará junto con la barra en sí. Puede que no te guste este efecto y es bastante simple cambiar la alineación. Pero si considera lo fácil que es todo esto, puede comenzar a pensar en nuevos conceptos para probarlos.
Modos de relleno de animación
Cuando comencé a animar los elementos por primera vez, cada barra terminaba la animación y luego regresaba automáticamente al 100% de ancho. Obviamente, esta no era mi intención, así que busqué una solución.
Estaba leyendo que podemos configurar un ancho predeterminado en la clase original como .htmlcss ¿Entonces termina al 100% de ancho una vez que la animación está terminada? o en el caso de jQuery la clase necesitaría un ancho de 55%. Siento que esto casi anula el propósito de tener que copiar el valor de ancho dos veces. Luego me enteré de los modos de relleno que era algo que nunca había escuchado antes.
Los modos de relleno le dicen a la animación cómo utilizar los estilos antes y después de completarlos. Usando la palabra clave hacia adelante obligará a cada elemento a conservar los estilos CSS que se encuentran en el último fotograma clave. Entonces, en este caso, estamos ejecutando una animación diferente para cada clase, y cada animación tiene una posición inicial del 0% seguida de una posición completa del 100%. Nunca supe después de que se completara la animación que volvería a los estilos originales.
Si desea leer un poco más sobre los modos de relleno, consulte este artículo de Mozilla, que profundiza en mayor detalle. El concepto es muy simple, pero puedo entender cómo un nuevo desarrollador que prueba las animaciones de fotogramas clave de CSS3 no sabría nada al respecto.
Finalizando Keyframes
El último bloque de código que quiero compartir son los fotogramas clave. Le damos a cada configuración de fotogramas clave un nombre único que está representado por el anterior animación propiedades Estoy usando prefijos de CSS3 para -mez y -kebkit para manejar el cumplimiento de tantas versiones del navegador como sea posible. Notará que las animaciones se dividen en bloques agrupados por el nombre de la animación:
También notará que cada animación solo usa una posición inicial y una posición completada, todas las cuales deberían animarse dentro de 1.5 segundos. Algunas de las posiciones iniciales usan 35px o 45px para encapsular completamente el texto de la etiqueta. Puede cambiar este valor a 0px si no desea que se encuentre ningún texto dentro de la barra de habilidades.
Aparte de estos estilos, todo lo demás debería ser bastante conocido. La última gran sección en mi hoja de estilo redefine los gradientes internos de cada barra de habilidades; sin etiquetas, puede intentar incorporar colores para diferenciar entre conjuntos de habilidades. Esta es la razón por la que mis barras de habilidades del conjunto secundario también incluyen un .alt clase.
Demo en vivo - Descargar código fuente
Clausura
Hay muchos otros fantásticos tutoriales que cubren este tema y otras animaciones de fotogramas clave. Se pueden encontrar muchos ejemplos excelentes de código en sitios web como CodePen y JSFiddle si tiene tiempo para buscar.Mis ejemplos con etiquetas de texto internas, o solo los porcentajes estándar, pueden funcionar en cualquier diseño de sitio web similar.
Sea creativo con estas animaciones para ver cómo podrían encajar en otros proyectos web futuros. También puede descargar el código fuente de mi tutorial e intentar crear animaciones más complejas.