Cómo agregar un efecto de desplazamiento a los miembros del equipo de BIOS en Div

No es ningún secreto que las páginas son maravillosas para crear clics en su sitio web. También es ese tipo de página la que enfatizará la parte humana de la compañía detrás del sitio web. Saber esto nos da cuenta de que es importante prestar atención a cómo estructuramos las páginas, qué tipo de información compartimos y cómo creamos interacciones. Una de las cosas que puede hacer para mejorar la experiencia de la página es proporcionar una sección de los miembros del equipo que ponga a sus empleados en el centro de atención. Además, puede agregar un efecto de la biografía a las fotos de los miembros del equipo utilizando solo las opciones integradas del Div. Esto le permitirá ahorrar espacio en la página en la que está trabajando y crear una interacción entre usted y sus visitantes.
En este tutorial, te mostraremos paso a paso cómo llegar allí. Una vez que obtenga el enfoque, ¡podrá personalizar el estilo de diseño de acuerdo con sus necesidades para alcanzarlo! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Comencemos a recrear suscribirse a nuestro canal de YouTube Agregar una nueva sección de espaciado Cree una nueva página o abra una existente y agregue una nueva sección utilizando los siguientes valores de llenado personalizados:
Revestimiento superior: 100 px
Finamiento inferior: 100 PX

Agregue la estructura de la columna de la fila # 1 Después de haber terminado de agregar el relleno personalizado a su sección, puede cerrar la configuración de la sección y agregar una nueva línea con una sola columna.

Agregue un módulo de texto Agregar contenido H2 Agregue un modo de texto de título en la columna con una copia de su elección. Configuración de texto Luego, acceda a la configuración de texto H2 y realice algunos cambios en la apariencia de copia.

2 Sección de fuentes: Cinzel
Título 2 Estilo de fuente: pequeño mayúscula
Título 2 Alineación de texto: Centro
Rúbrica 2 Dimensión de texto: 70 PX
Agregue un módulo de divisor de visibilidad continúe agregando un nuevo módulo divisor justo debajo del modo de texto del título.

Divisor del espectáculo: si
Acceso a color divisor La pestaña de diseño, abra la configuración de color y cambie el color del separador de acuerdo con:

Color divisor: # 333333
Dimensión Entonces, reduciremos el tamaño del divisor y lo centraremos.

Ancho: 26%
Alineación del módulo: centro
Agregue la estructura de la fila # 2 de la columna justo debajo de la fila anterior que ha agregado, continúe y agregue una nueva línea usando tres columnas iguales.

Dimensión sin agregar módulos, abra la configuración de la fila y realice algunos ajustes a la configuración del tamaño.

Use ancho personalizado: sí
Unidad: PX
Ancho personalizado: 2000 PX
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Extendiendo luego, acceda a la configuración de espaciado y agregue valores de margen personalizado y llenado.

Margen superior: 50 PX
Margen inferior: 50 PX
Revestimiento superior: 10 px
Finamiento inferior: 10 PX
ENNIZACIÓN IZQUIERDA: 5 PX
Revestimiento derecho: 5 PX
Columna 1, 2 y 3 Lineo izquierdo: 5 PX
Columna 1, 2 y 3 revestimiento derecho: 5 PX
Box Shadow también le da a nuestra fila un poco de profundidad agregando una sombra de caja con la siguiente configuración:

Poder de poco claro de la sombra de la caja: 80 px
Poder de extensión de la sombra de la caja: -14pxculuri Shadow: RGBA (0.0,0,03)
Agregue el módulo de imagen a la columna 1 Cargue la imagen en el módulo de imagen es hora de comenzar a agregar módulos. Para lograr el efecto bio rondado, necesitaremos dos módulos en total; un módulo de imagen y un módulo de propaganda. El módulo de imagen contendrá la imagen del miembro del equipo que desea presentar. El módulo de la propaganda, por otro lado, se usará para agregar el icono a la esquina inferior izquierda y ver la biografía. Agregue un módulo de imagen a la primera columna utilizando una imagen de tamaño cuadrado.
Filtros El diseño que creamos está completamente en tonos grises. Para agregar esta escala de gris a nuestra imagen, vaya a la configuración del filtro y elimine toda la saturación.

Saturación: 0%

Agregue los módulos de la propaganda a la columna 1 Agregar contenido Continúe agregando un nuevo módulo de Blurb justo debajo del módulo de imagen en la columna 1. Agregue el nombre del miembro del equipo al campo de título e ingrese más información sobre el miembro del equipo en el cuadro de contenido.

Elija el icono que haremos es elegir un ícono de elección para mostrar a los visitantes que hay más que una imagen.

Color de fondo predeterminado, entonces elegiremos un color de fondo transparente completo.

Color de fondo: RGBA (255,255,255.0)

Coloque el cursor en el color de fondo y cambiaremos ese color en el flotador.
Color de fondo: RGBA (255.255.255.0.88)

Configuración predeterminada para los íconos desean un icono visible para ayudar a los visitantes a comprender que pueden moverlo. Cambie la configuración del icono para obtener un ícono como este.
Icono de color: #ffffff

Icono del círculo: si
Color círculo: # 000000 placas de iconos: izquierda
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 50 PX
Coloque el cursor en la configuración del ícono, sin embargo, no queremos que el icono aparezca en el flotador. Es por eso que usaremos un color completamente transparente.
Icono de color: RGBA (255,255,255,0)
Color círculo: RGBA (255,255,255.0)

Configuración predeterminada para el texto del título Luego, acceda a la configuración del texto del título y realice algunos cambios.
Título de la fuente: Cinzel
Título Fuente de peso: Bold

Estilo de fuente de título: pequeño mayúscula
Color de texto del título: # 000000
Título Tamaño del texto: 0 PX
Coloque el cursor en la configuración del título Cambie el tamaño de texto al cursor.
Título Tamaño del texto: 30 PX
Configuración predeterminada para el texto del cuerpo modifica y configuración para el texto del cuerpo.

Font Corp: Open Sans
El color del texto del cuerpo: # 000000

Tamaño del texto del cuerpo: 0 PX
La altura de la línea del cuerpo: 1.8em
Coloque el cursor en la configuración del texto del cuerpo y, nuevamente, cambie el tamaño del texto del cuerpo al cursor.
Tamaño del texto del cuerpo: 14 PX
El espaciado predeterminado no menos importante, tendremos que crear una superposición entre el módulo de la propaganda y el módulo de imagen utilizando el margen superior negativo.

Margen superior: -3.7VW (escritorio), -9VW (tableta y teléfono)
Margen inferior: 1.5VW (tableta), 2 VW (teléfono)

Distancia al mouse cambia el margen personalizado y los valores de llenado al cursor.
Margen superior: -11,38VW
Revestimiento superior: 20 px

Finamiento inferior: 20 PX
Revestimiento derecho: 50 PX
Clone ambos módulos dos veces y coloque los duplicados en las columnas restantes que terminamos de crear nuestro primer efecto de la biografía de floso. Para ahorrar tiempo, simplemente podemos clonar ambos módulos en la columna 1 dos veces y colocar los duplicados en las dos columnas restantes. Cambiar la imagen y el contenido del módulo de la propaganda no olviden cambiar la imagen del módulo de imagen y copiar al módulo de la propaganda ¡Para completar la sección para los miembros del equipo!
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré cómo crear un efecto biografía de flotar en las fotos de los miembros del equipo usando solo las opciones incorporadas del DIV. Mencioné lo importante que es crear bien sobre las páginas, porque son una de las páginas más visitadas. El uso de los efectos de la biografía de desplazamiento para las fotos de los miembros del equipo no solo le permitirá llevar su página al siguiente nivel, sino también crear una interacción con sus visitantes. Si tiene preguntas o sugerencias, asegúrese de dejar un comentario en ¡La sección de los comentarios a continuación!