Cómo diseñar mostradores de bares animados de desplazamiento con div Div

Los medidores de barra se utilizan en toda la web para ilustrar efectivamente datos o valores con una animación de color sutil que representa un cierto valor. Div tiene un módulo de medidor de barra dedicado que se puede usar para generar fácilmente contadores de bares animados. Estas son adiciones populares a las páginas, páginas de servicio y estudios, la mayoría de los contadores de barras parecen estar animados como parecen y pueden ser difíciles de personalizar. Sin embargo, en este tutorial, le mostraremos cómo crear contadores de bar totalmente personalizables (cero) que están animados en el desplazamiento usando Div. Para hacer esto, aprovecharemos las opciones de posición y los efectos de la división y las usaremos de manera precisa.
Vamos a empezar. Tire de la vista con un vistazo rápido a los contadores de barras que construiremos en este tutorial. Descargue el aspecto gratuito para poner sus manos en los contadores de barras de desplazamiento en este tutorial, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo ZIP e importe el archivo JSON desde la biblioteca de la Divic.
Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Parte 1: Optimización de la sección, fila y columna Agregar el inicio de la fila T0, agregue dos columnas a la sección.
Configuración de la sección Luego abra la configuración de la sección y agregue un color de fondo de la siguiente manera:

Antecedentes de COL0R: # 000545
Luego, le dé a la sección un margen temporal para probar los efectos y algunos rellenos de la siguiente manera:

Marja: 80VH arriba, 80VH abajo
Junta de 10 VW hacia arriba, 10 VW abajo
El ancho de la fila luego abra la configuración de la fila y agregue el siguiente ancho:

Ancho: 90%
Ancho máximo: 700 PX
La columna de desbordamiento se asegura de ocultar el derrame de las dos columnas dentro de la fila. Para esto, abra la configuración para cada una de las columnas y actualice lo siguiente: Overflow: Hidden

Desbordamiento verticalmente: oculto
Parte 2: Creación de un medidor de barra con efectos de desplazamiento El medidor de barra estará compuesto por tres elementos: un fondo de barra (modo divisor), una barra de color (también modo divisor) y el contenido de la barra (blurb). El elemento de la barra de colores es lo que se animará con compensaciones del efecto del movimiento horizontal.
Comencemos con el fondo de la barra. Creación del fondo de la barra Agregar un módulo divisor Agregue un nuevo módulo divisor en la columna 1.

Divisor de divisor de configuración Divisor: No
Color de fondo: RGBA (255.255.255.0.1)

Ancho: 300 PX

Altura: 70 PX

Cree el modo Divisor Duplicado del medidor de barra para crear la barra colorida para el medidor de barra, copie el módulo divisor anterior que usé para hacer el fondo de la barra.
Fondo de divisor luego actualice el fondo con un nuevo fondo degradado de la siguiente manera:

Fondo degradado Izquierda: # FE7E1F

Color derecho de fondo degradado: # FFBC48
Dirección de gradiente: 90 grados
La posición del divisor para hacer que la barra colorida se asiente en la parte superior del fondo de la barra, debemos darle una posición absoluta con un índice de 1:
Posición: Absoluto

IND ÍNDICE: 1
Los efectos del separador ahora están listos para agregar el movimiento a la barra del medidor de la barra. Para hacer esto, utilizaremos un efecto de desarrollo horizontal que mueva el módulo divisor de izquierda a derecha. Debido a que se excede la columna, no veremos la barra porque se extiende más allá del lado izquierdo de la columna. Pero lo veremos en mente a medida que avanza hacia la derecha. El uso de valores de compensación para determinar los valores porcentuales para el medidor de barras antes de agregar el movimiento horizontal al divisor / barra, debemos entender cómo determinar un valor porcentual que se mostrará en el medidor de barra. En otras palabras, si queremos representar el 25% en el medidor de barra, debemos saber qué viaje horizontal moverá la barra hacia el correcto exactamente el 25% del ancho del telón de fondo de la barra.
Podemos hacer algunas matemáticas simples para descubrir. El ancho total de la barra es de 300 px. Cada valor de desplazamiento horizontal es relativo a 100px (1 es 100px, -2 es -200px, etc …) para mover la barra hacia la izquierda (fuera de la vista), debemos agregar un desplazamiento inicial de -3 (-300px) . Esto lo mueve hacia la izquierda de 300 PX, desde la vista. Luego debemos mover la barra más del 25% de 300 PX (es decir, 75 PX) para completar la animación del desfile. Para mover la barra a más de 75 px a la derecha a medida que la barra alcanza el centro vertical de la página, debemos tener un desplazamiento promedio de -2.25 (porque -300 más 75 es igual a -225). Esto probablemente le recuerda las líneas numéricas que utilizamos en la escuela primaria.

Muestre 25% con movimiento horizontal para mostrar 25% con movimiento horizontal, seleccione la pestaña de movimiento horizontal y actualice lo siguiente:

Habilitar movimiento horizontal: inicio daoffset: -3
GAP promedio: -2.25
Grado final: -2.25
Cree contenido de contenido de la barra para crear el contenido de la barra, utilizaremos un módulo de propaganda. Los borrones nos permiten agregar fácilmente un icono con mano izquierda, junto con un título y texto del cuerpo, que será perfecto para el medidor de barras. Bajo el módulo divisor de la barra coloreada, agregue un módulo de propaganda.
El contenido de la intervalo y luego actualice el contenido de la siguiente manera:
Título: 25%
Cuerpo: optimización

Icono: ver captura de pantalla

Diseño de Blurb en la pestaña de diseño actualizar lo siguiente:
Icono de color: #ffffff
Colocación de la imagen / icono: izquierda
Use el tamaño de fuente de iconos: sí

Icono de tamaño de fuente: 40 PX
Color de texto: Abierto
Font Corp: Rubik
Estilo de fuentes del cuerpo: TT
Espaciado de las letras del cuerpo: 0.2em

La altura de la línea del cuerpo: 1em
Ancho de contenido: 100%
Ancho: 300 PX
Altura: 70 PX
Revestimiento: 15 px en la parte superior, 15 px a la izquierda

Posición: Absoluto
IND ÍNDICE: 2
Parte 3: Creación de contadores de barras adicionales En la próxima parte, continuaremos haciendo más contadores de barras utilizando la misma técnica. Crearemos un medidor de bares del 50%, 75% y 100% para redondear el diseño del aspecto. Esto debería darle buenos ejemplos de trabajo para hacer más por su cuenta.
Creación de un medidor de barra duplicada al 50% con medidor de barra después de tener el primer medidor de barra creado en la columna 1, podemos duplicar la columna completa o copiar y pegar los tres módulos que componen el medidor de barra en la columna 2. Ahora debe Tiene dos columnas cada una con contadores de barras idénticos.

Actualice la configuración del divisor de barra en la columna 2, abra la configuración del colorido separador de barras y actualice los colores de fondo de gradiente: fondo degradado izquierdo: # 4C75F8
Color derecho de fondo degradado: # 57A1FF

Efectos luego actualice el efecto del movimiento horizontal para llenar el 50% de la barra de desplazamiento:
GAP promedio: -1.5

Grado final: -1.5
Actualice el contenido de la propaganda y luego abra la configuración de la propaganda en la columna 2 y actualice el contenido:
Título: 50%

Icono: ver captura de pantalla
La creación de un medidor de barra del 75% duplica la fila para comenzar a diseñar los siguientes dos contadores de barras, copie toda la fila para crear otra fila idéntica debajo de ella.
Actualice el fondo de la barra y los efectos de desarrollo abren la configuración para el colorido módulo de separación de la barra y actualice los siguientes colores de fondo:

Fondo degradado Izquierda: # 4C75F8
Color derecho de fondo degradado: # 57A1FF
Luego actualice la compensación del movimiento horizontal de la siguiente manera:

Desplazamiento medio: -. 075

Grado final: -0.75
Contenido de blurbs Abra la configuración de la propaganda y actualice el contenido de la siguiente manera:
Título: 75%
Icono: ver captura de pantalla
La creación de un medidor de barra 100% actualiza el color de la barra y los efectos de desarrollo para crear un medidor de barra 100%, cambie a la columna 2 y actualice el color de fondo del divisor de barra de colores de la siguiente manera:
Fondo degradado Izquierda: # F449B4

Color derecho de fondo degradado: # FC845B
Luego actualice la compensación del movimiento horizontal de la siguiente manera:
Brecha promedio: 0

Grado final: 0
Actualice el contenido de la propaganda Finalmente, actualice el contenido de la propaganda: Título: 100%
Icono: ver captura de pantalla
El resultado final aquí es una captura de pantalla del resultado final.Agregué una imagen de fondo personalizada del quinto paquete de generadores de temas como el último toque.
Ahora, qué movimiento Movimiento en acción.Los pensamientos finales esperan que estas barras animadas de desplazamiento sean útiles para un proyecto futuro.La desventaja de tener un diseño tan personalizado es que debe hacer pocos cálculos para calcular cuán lejos puede mover la barra de colores para un cierto porcentaje.Pero la parte superior es que tienes más oportunidades para modelos y más únicos y creativos.Si está interesado, vea nuestra publicación sobre la creación de medidores de círculo personalizados que también están animados en el pergamino.Espero tener noticias suyas en los comentarios.¡Suerte!