Uso de las animaciones de Divi para hacer flotar y hacer rebotar la imagen
Publicado: 2017-10-20Bienvenido a la parte 6 de esta serie de 6 partes que le enseñará cómo usar las nuevas opciones de animación de Divi para diseñar secciones de página increíbles. Lo guiaré a través de cómo construir las diferentes secciones de nuestra página de demostración en vivo para mostrarle técnicas para agregar animaciones a su sitio web. Las funciones de animación son realmente divertidas y fáciles de usar. Y con Visual Builder, puede ver cómo su creación cobra vida en cada etapa del camino. Ven y únete a mí mientras exploramos el poder de las animaciones Divi.
En la última publicación, creamos la sección 7 de nuestra página de demostración de animación, donde le mostré cómo animar imágenes usando el estilo de animación de rollo para agregar un movimiento realista a su contenido.
Hoy, vamos a abordar las secciones 8 y 9 de nuestra página de demostración de animación. La sección 8 es un gran ejemplo de cómo hacer que un elemento destacado se destaque mediante una combinación de la animación de diapositivas y los efectos de desenfoque. La Sección 9 es una forma simple y elegante de agregar animación a una sección de equipo que muestra fotos de su equipo.
Empecemos.
Aquí hay un adelanto de lo que estaremos construyendo en la publicación de hoy
Preparación de los elementos de diseño
Necesitará cuatro imágenes para este tutorial. Necesitará una imagen de fondo personalizada y tres imágenes de tarjetas de recetas. La imagen de fondo es de 1280 × 936 y tiene un fondo amarillo con 6 rectángulos blancos semitransparentes con sombras adicionales para mayor profundidad. Una vez que se utiliza el fondo en la sección con paralaje, dará la impresión de tarjetas de recetas flotando en el fondo. Las imágenes de la tarjeta de recetas son cada una de 375 × 667. Aquí están las imágenes utilizadas en este tutorial.
Imagen de fondo
Imagen de tarjeta de recetas n. ° 1
Imagen de tarjeta de receta n. ° 2
Imagen de tarjeta de receta n. ° 3
Uso de las animaciones de Divi para hacer flotar y hacer rebotar la imagen
Suscríbete a nuestro canal de Youtube
Edificio de la Sección 8
Antes de comenzar el proceso de construcción, aquí hay un vistazo a la vista de estructura alámbrica del diseño de la sección que crearemos usando el constructor visual.
Usando Visual Builder, comencemos agregando otra sección regular a nuestro diseño. Luego agregue una fila de tres columnas (un tercio un tercio un tercio) a su sección.
Actualizar la configuración de la fila
Antes de agregar nuestro primer módulo, vaya a la configuración de la fila y actualice lo siguiente:
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Ancho personalizado: 1366px
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1
Columna 1 Relleno personalizado: 6% a la derecha
Columna 3 Relleno personalizado: 8% restante
Agregar fondo a su sección
A continuación, pongamos la imagen de fondo principal en nuestra sección. Vaya a la configuración de la sección y actualice lo siguiente:
En la pestaña Contenido ...
Imagen de fondo: [insertar imagen de 1280 × 936]
Utilice el método Parallax: SÍ
Método Parallax: True Parallax
Agregar imagen n. ° 1
Ahora estamos leídos para agregar nuestros módulos a nuestra fila. En la primera columna (izquierda), agregue un módulo de imagen.
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
URL de la imagen: [ingrese la imagen de la tarjeta de recetas n. ° 1]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: diapositiva
Dirección de animación: Arriba
Intensidad de animación: 20%
En la pestaña Avanzado…
Aquí vamos a agregar algo de CSS personalizado para darle a la imagen de la tarjeta un borde redondeado, una sombra de cuadro y un filtro de desenfoque. Ingrese el siguiente CSS en el cuadro Elementos principales:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(2px) opacity(.75);
Guardar ajustes
Agregue dos módulos de texto en la columna del medio
A continuación, agregue un módulo de texto en la segunda (o en el medio) columna y actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
Ingrese el siguiente encabezado h1 en la pestaña de texto del cuadro de contenido:
<h1>The Best Recipes for Success</h1>
En la pestaña Diseño…
Fuente de encabezado: Playfair Display, negrita (B)
Tamaño de fuente del encabezado: 60px
Altura de la línea de encabezado: 1.3em
Margen personalizado: 20px inferior
Estilo de animación: Doblar
Dirección de animación: Arriba
Guardar ajustes
Agregue otro módulo de texto debajo del que acaba de crear y actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
Contenido: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, eficitur.
En la pestaña Diseño…
Tamaño de fuente de texto: 18px
Texto Color del texto: rgba (0,0,0,0.56)
Altura de la línea de texto: 1.9em
Margen personalizado: 40px
Estilo de animación: Doblar
Dirección de animación: Abajo
Retraso de animación: 150 ms
Guardar ajustes
Agregar imagen n. ° 2
Agregue un módulo de imagen debajo de los dos módulos de texto que acaba de crear.
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
URL de la imagen: [ingrese la imagen de la tarjeta n. ° 2]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: diapositiva
Dirección de animación: Arriba
Intensidad de animación: 10%
En la pestaña Avanzado…
Aquí vamos a agregar CSS personalizado (similar a la imagen de la primera tarjeta, excepto sin el efecto de desenfoque) para darle a la imagen de la tarjeta un borde redondeado y una sombra de caja. Ingrese el siguiente CSS en el cuadro Elementos principales:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
Guardar ajustes
Agregar imagen n. ° 3
Agreguemos nuestra tercera y última imagen de tarjeta a la tercera (o la derecha) columna insertando un módulo de imagen:
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
URL de la imagen: [ingrese la imagen de la tarjeta n. ° 3]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Margen personalizado: 20% superior
Estilo de animación: diapositiva
Dirección de animación: Arriba
Intensidad de animación: 30%
Guardar ajustes
En la pestaña Avanzado…
Agregue este CSS personalizado en el cuadro Elemento principal:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(8px) opacity(.4);
Guardar ajustes
¡Excelente! Con esto concluye la sección 8 de nuestra página de demostración. Mira el resultado final.
La animación es sorprendentemente realista y hace un gran uso de la función de paralaje que mueve el fondo hacia abajo a una velocidad diferente a la de los módulos que se encuentran en la parte superior cuando se desplaza. El hecho de que las cartas estén animadas hacia arriba con el fondo hacia abajo da la impresión de que las cartas flotan. Debo decir que el contenido realmente aparece en esta sección.
Construcción de la sección 9 de la demostración
En nuestra sección final, vamos a construir una sección simple de "Nuestro equipo" con una pequeña animación que literalmente "hace estallar". Esto es lo que vamos a construir:
Aquí hay un vistazo del diseño desde la vista de estructura alámbrica.
Agregar un encabezado de sección
Primero, agregue una sección regular con una fila de una columna. luego agregue un módulo de texto a la columna.
Actualice la configuración de texto de la siguiente manera:
En la pestaña Contenido ...
Contenido: Nuestro equipo
En la pestaña Diseño…
Fuente de texto: Raleway, negrita (B), mayúscula (TT)
Tamaño de fuente de texto: 15px
Texto Color del texto: rgba (0,0,0,0.32)
Espaciado de letras de texto: 5px
Altura de la línea de texto: 1.9em
Margen personalizado: 20px
Estilo de animación: diapositiva
Dirección de animación: Arriba
Duración de la animación: 500 ms
Retraso de animación: 1000 ms
En la pestaña Avanzado…
Guardar ajustes
Agregue otro módulo de texto debajo del que acaba de crear y actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
Ingrese la siguiente etiqueta h1 en la pestaña de texto del cuadro de contenido:
<h1>Highly Skilled Ninjas</h1>
En la pestaña Diseño…
Fuente de encabezado: Raleway Light
Alineación del texto del encabezado: centro
Tamaño de fuente del encabezado: 48px
Color del texto del encabezado: # 3a3830
Altura de la línea de encabezado: 1.3em
Margen personalizado: 20px inferior
Estilo de animación: diapositiva
Dirección de animación: Derecha
Intensidad de la animación: 12%
Guardar ajustes
Ahora, para agregar la pequeña línea divisoria verde, agregue un módulo divisor debajo del módulo de texto.
Luego actualice la configuración del divisor de la siguiente manera:
En la pestaña Contenido ...
Mostrar divisor: SÍ
En la pestaña Diseño…
Color: # 7cda24
Peso del divisor: 3px
Alto: 3px
Ancho: 60px (escriba esto)
Alineación del módulo: centro
Estilo de animación: diapositiva
Dirección de animación: Abajo
Duración de la animación: 500 ms
Retraso de animación: 1000 ms
Intensidad de animación: 200%
Guardar ajustes
Adición de las cuatro imágenes del equipo
Para agregar las imágenes de los miembros de nuestro equipo, agregue una fila de cuatro columnas debajo de la fila que contiene el encabezado que acabamos de crear.
Agregue un módulo de persona en la primera columna y actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
Nombre: Nick
URL de la imagen: [ingrese su foto de 150 × 150]
En la pestaña Diseño…
Fuente de encabezado: Raleway Light, Negrita (B), Mayúscula (TT)
Tamaño de fuente del encabezado: 13px
Color del texto del encabezado: rgba (0,0,0,0.71)
Espaciado entre letras del encabezado: 3px
En la pestaña Avanzado…
Agregue el siguiente CSS en el cuadro Imagen de miembro:
border-radius: 100%; overflow: hidden; width: 180px; margin: auto auto 20px auto;
Esto le dará a nuestra imagen un bonito borde circular.
Agregue el siguiente CSS personalizado a la descripción del miembro:
text-align: center; display: block;
Esto centra el Nombre.
Guardar ajustes
Ahora puede duplicar el módulo de persona que acaba de crear para agregar los siguientes tres para llenar las siguientes tres columnas. Todo lo que necesita hacer es actualizar la imagen y el nombre de cada uno de los módulos que duplica.
Una vez que haya agregado los cuatro módulos de su persona, estará listo para el paso final de esta sección, que consiste en diseñar y animar la fila. Para hacer eso, actualice la configuración de la fila de la siguiente manera:
En la pestaña Diseño…
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 2
Relleno personalizado: 60px superior
Estilo de animación: rebote
Duración de la animación: 700 ms
Retraso de animación: 1000 ms
Bueno, eso concluye la sección 9 de nuestra página de demostración de animación. Y también concluye la serie de 6 partes sobre el uso de la animación con Divi.
Terminando la serie
Espero que haya disfrutado construyendo nuestra página de demostración de animación. El diseño por sí solo es una gran inspiración. Y el uso de la animación en todas partes sin duda servirá como guía de referencia para futuras creaciones de páginas. Un agradecimiento especial a Kenny Sing, nuestro director, por crear este diseño. Estamos muy orgullosos de ello, queremos ofrecerle este diseño de forma gratuita para ayudarlo a poner en marcha su próximo proyecto.
Bono: descargue estas secciones para una fácil importación
Como beneficio adicional, hemos empaquetado las secciones integradas en el tutorial de hoy en una descarga gratuita que puede obtener utilizando el formulario de suscripción por correo electrónico a continuación. Simplemente ingrese su correo electrónico y aparecerá el botón de descarga. No se preocupe por "volver a suscribirse" si ya es parte de nuestro Boletín Divi. Vuelva a ingresar su correo electrónico no resultará en más correos electrónicos o duplicados. Simplemente revelará la descarga.
¡Disfrutar!
Descargar el paquete de diseño
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para usar estas descargas, comience por ubicar el archivo comprimido llamado All_Animation_Effects_1.zip en nuestra carpeta de descargas. Descomprímalo para revelar todas las importaciones de esta serie, incluidas las dos últimas de esta publicación.
Navegue en su administrador de WordPress a Divi> Biblioteca Divi> Importar y exportar. Cuando aparezca el modal de portabilidad, haga clic en la pestaña de importación y en el botón etiquetado como elegir archivo.
Seleccione el archivo json que prefiera y haga clic en "Importar diseños de Divi Builder". Una vez que se complete la importación, navegue hasta la publicación o página a la que le gustaría agregar una de las secciones anteriores.
Activa el constructor visual. Navegue a la parte de la página a la que le gustaría agregar una de las secciones anteriores. Al hacer clic en el icono de agregar una nueva sección, se le presentará la opción "Agregar desde la biblioteca". Elija esta opción y seleccione el diseño que desee.
Espero tener noticias tuyas en los comentarios a continuación.
¡Salud!